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