将焦点移至组合框字段而不是 VuetifyJS 中的芯片

Question

如果您使用键盘的 Tab 键 in this VuetifyJS/VueJS example，芯片会首先聚焦，并且仅在第二个选项卡 组合框文本字段 之后聚焦。如何首先聚焦 combobox 文本字段 而不是芯片？

<v-flex xs12 sm6 md3>
      <v-text-field label="Regular" autofocus></v-text-field>
    </v-flex>

    <v-flex xs12>
      <v-combobox v-model="select" :items="items" chips label="I use a scoped slot">
        <template slot="selection" slot-scope="data">
          <v-chip
            :selected="data.selected"
            :disabled="data.disabled"
            :key="JSON.stringify(data.item)"
            class="v-chip--select-multi "
            @input="data.parent.selectItem(data.item)"
          >
            <v-avatar class="accent white--text">
              {{ data.item.slice(0, 1).toUpperCase() }}
            </v-avatar>
            {{ data.item }}
          </v-chip>
        </template>
      </v-combobox>
    </v-flex>

Answer 1

使用 tabindex 属性指定元素的 Tab 键顺序。
以下将使输入在芯片之前可聚焦。

<v-combobox tabindex="1">
<v-chip tabindex="2">

要防止元素获得焦点，您可以将 tabindex 设置为 -1。
请注意，默认值为 0.

将焦点移至组合框字段而不是 VuetifyJS 中的芯片

Move focus to combobox field instead of chip in VuetifyJS

javascript

combobox

tabindex

vue.js

vuetify.js