javascript - 验证 : How to preselect active tab?

Question

我想使用 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>

Answer 1

预选事件标签:

   <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' }
      ]
    })
  }

See it in action here

注意:我们已经预先选择了名称为 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