我想使用 Vuetify (v1.0.18) 使用 v-tabs 呈现一些静态导航。路由是在服务器端完成的,所以我需要一种通过属性设置事件选项卡的方法。这是一项非常基本的任务,但我无法让它发挥作用。示例:
<v-tabs>
<v-tab href="/path1">Tab 1</v-tab>
<v-tab href="/path2">Tab 2</v-tab>
</v-tabs>
这会预选第一个选项卡 - 很好。
现在的问题是:如何预选第二个选项卡?以下不不工作:
<v-tabs value="tab2">
<v-tab id="tab1" href="/path1">Tab 1</v-tab>
<v-tab id="tab2" href="/path2">Tab 2</v-tab>
</v-tabs>
最佳答案
预选事件标签:
<v-tabs grow v-model="active_tab">
<v-tab v-for="tab of tabs" :key="tab.id">
{{tab.name}}
</v-tab>
</v-tabs>
脚本部分:
export default {
data: () => ({
active_tab: 2,
tabs: [
{ id: 1, name: 'tab1' },
{ id: 2, name: 'tab2' },
{ id: 3, name: 'tab3' }
]
})
}
注意:我们已经预先选择了名称为 tab3 的选项卡。
Keep in mind that vuetify will set the
active_tab
to the index of the active tab. So the index of the item with id 3 is 2 because it's starting from 0.
对于这个例子,我使用了 vuetify 版本:1.1.9
关于javascript - 验证 : How to preselect active tab?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50392918/