Vuetify - 通过按键更改 v-tabs

ekj*_*039 2 vuetify.js

我有一个 vuetify 选项卡组件,其中包括一个菜单和许多不同的选项卡,这些选项卡可以以随机顺序显示。看起来 v-tab 切换是通过基于索引来工作的。如何通过密钥/唯一 ID 将 vuetify v-tab 切换到正确的选项卡?

例子:

 <v-tabs v-model="tab">
   <v-tab href="#tab-myUniqueKeyOne">TEST ONE</v-tab>
   <v-menu>
     <template v-slot:activator="{ on }">
       <v-btn text v-on="on">DROPDOWN_TAB</v-btn>
     </template>
     <v-list>
       <v-list-item @click="changeToTab('tab-foo')">Foo</v-list-item>
       <v-list-item @click="changeToTab('tab-bar')">Bar</v-list-item>
     </v-list>
   </v-menu>
   <v-tab href="#tab-myUniqueKeyThree">TEST THREE</v-tab>
   <v-tab href="#tab-myUniqueKeyTwo">TEST TWO</v-tab>
 </v-tabs>
 <v-tabs-items v-model="tab">
   <v-tab-item value="tab-foo">My Foo</v-tab-item>
   <v-tab-item value="tab-baz">Some Hidden Tab</v-tab-item>
   <v-tab-item value="tab-myUniqueKeyTwo">Two</v-tab-item>
   <v-tab-item value="tab-bar">My Bar</v-tab-item>
   <v-tab-item value="tab-myUniqueKeyThree">Three</v-tab-item>
   <v-tab-item value="tab-myUniqueKeyOne">One</v-tab-item>
 </v-tabs-items>

 data: () => {
   tab: null,
 }
 methods: {
   changeToTab(tab) {
     this.tab = tab;
   }
 }
Run Code Online (Sandbox Code Playgroud)

Jac*_*ack 5

下面是一个简化的示例。底线,使用hreftabsvaluetab-items

https://codepen.io/jack3625/pen/xxwopad