Vuetify：如何预选活动标签？

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>

原文由 Georg Ledermann 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

作为一种解决方法，我制作了一个包装器组件：

 <template>
  <v-tabs v-model="selectedTab">
    <slot></slot>
  </v-tabs>
</template>

<script>
  export default {
    name: 'StaticTabs',

    props: [ 'selected' ],

    mounted() {
      this.selectedTab = this.selected
    },

    data: () => ({
      selectedTab: null
    }),
  }
</script>

与它一起使用：

 <static-tabs selected="/path2">
  <v-tab id="tab1" href="/path1">Tab 1</v-tab>
  <v-tab id="tab2" href="/path2">Tab 2</v-tab>
</static-tabs>

一个非常基本的任务有很多代码，但它确实有效。

原文由 Georg Ledermann 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

预选活动选项卡：

    <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 的选项卡。

请记住，vuetify 会将 active_tab 设置为活动选项卡的索引。所以 id 为 3 的项目的索引是 2，因为它是从 0 开始的。

对于这个例子，我使用了 vuetify 版本：1.1.9

原文由 Roland 发布，翻译遵循 CC BY-SA 4.0 许可协议