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>

Answer 1

使用v-model：

<v-tabs v-model="activetab_href_variable">

当前版本文档中没有关于它的信息（05/17/2018），但 0.17（https://vuetifyjs.com/releases/0.17/#/components/tabs）有：

v-model 字符串 - 当前选定的选项卡

Answer 2

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

<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>

对于一个非常基本的任务有很多代码，但它可以工作。

Answer 3

要预先选择一个活动标签：

   <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

Answer 4

设置托管组件的v-model内部mounted()回调v-tabs

<v-tabs v-model="selectedTab">
  <v-tab key='first'>First</v-tab>
  <v-tab key='second'>Second</v-tab>
</v-tabs>



<script>
export default {
   ...
   data: () => ({
      selectedTab: null;
    }),
   mounted() {
     this.selectedTab = 'first';
   },
   ...
}
</script>

Answer 5

为此，您可以将当前选项卡存储在 URL 中，作为嵌套路由或查询参数。

我最终经常使用后一种解决方案，以避免为每个选项卡内容创建单独的子组件。这是它的工作原理：

1. 第一个有用的步骤（但不是 100% 必须的）是命名选项卡，因此我们可以通过名称而不是序数来引用它们。这可以通过指定href和valueprops来实现，如下所示：

<v-tabs v-model="tab">
  <v-tab href="#one">
    One
  </v-tab>
  <v-tab-item value="one">
    Tab content
  </v-tab-item>
</v-tabs>

2. 接下来，我们可以使用带有 setter 的计算属性将当前选项卡存储为查询参数：

computed: {
  tab: {
    set (tab) {
      this.$router.replace({ query: { ...this.$route.query, tab } })
    },
    get () {
      return this.$route.query.tab
    }
  }
}

3. 现在，您可以通过以下链接打开特定选项卡，例如/page?tab=one（适用于按钮、路由器链接、与某人共享选项卡链接等）

此解决方案适用于 Vuetify.js 2.x。我写了一篇带有完整代码示例的简短文章，详细解释了它：https : //medium.com/@jareklipski/linking-to-a-specific-tab-in-vuetify-js-d978525f2e1a