Question

我有一个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;
   }
 }

Answer 1

下面是一个简化的示例。底线，请在href中使用tabs，在value中使用tab-items

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

Answer 2

看来要使此工作正常进行，唯一的方法就是还要为每个菜单项创建一个选项卡并将其隐藏。

<v-tab href="#tab-foo" style="display:none">FOO</v-tab>
<v-tab href="#tab-bar" style="display:none">BAR</v-tab>

完整示例如下所示： https://codepen.io/uglyhobbitfeet/pen/NWKaQGZ?editors=1010

Vuetify-通过按键更改v-tab

2 个答案: