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

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

在此处查看实际演示

注意: 我们预先选择了名称为tab3的选项卡。

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

对于此示例，我使用的是vuetify版本：1.1.9

- Roland

---

Vuetify的开发人员让“value”字段可以设置自己的值，并将v-tabs-items组件中的v-model变成了一个简单的计数器，这真是太愚蠢了。 - Nikita G.

Answer 2

为了实现这一点，您可以将当前标签存储在URL中，可以作为嵌套路由或查询参数。我经常使用后者来避免为每个标签内容创建单独的子组件。以下是其工作原理：

第一步（但不是100%必需的）是给选项卡命名，这样我们可以按名称而不是顺序号引用它们。这可以通过指定href和value属性来实现。

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

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

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

现在，您可以通过以下链接打开特定的选项卡，例如/page?tab=one（适用于按钮、路由器链接、与他人共享选项卡链接等）。此解决方案适用于Vuetify.js 2.x。我写了一篇简短的文章，包含完整的代码示例，详细解释了它：https://medium.com/@jareklipski/linking-to-a-specific-tab-in-vuetify-js-d978525f2e1a。

- loomchild

Answer 3

使用 v-model：

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

目前版本的文档（截至2018年5月17日）中没有关于此的信息，但是0.17版本（https://vuetifyjs.com/releases/0.17/#/components/tabs）有如下说明：

v-model String - 当前选中的标签页

- ndpu

---

嗯，但是使用 v-model 就意味着我不能使用一个简单的属性。我已经创建了一个包装组件，请看我的答案。 - Georg Ledermann

Answer 4

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

<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

Answer 5

在承载 v-tabs 的组件的 mounted() 回调中设置 v-model。

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

- Vamshi Krishna

---

对我来说它不起作用，但如果我将数字作为键放置，它就能正常工作。我使用的是Vue的v2.6.1版本和Vuetify的2.2.29版本。 - István Döbrentei

Answer 6

我用 this.$refs 解决了这个问题。

<v-tab v-model="tab1" ref="tab1">

选项卡1的文本 选项卡2的文本 选项卡3的文本

// Inside a method
someButton() {
  this.$refs.tab2.click()
}

- Oscar Perez

Answer 7

value 表示选项卡的索引，其中默认值为 0。要将第二个选项卡选为默认选项卡。

<vs-tabs :value="1">
 <vs-tab>tab 1</vs-tab>
 <vs-tab>tab 2</vs-tab>
</vs-tabs>

- JuanBruno

---

这是最简单的答案！在Vuetify 2.2中完美运行。文档只是说Value: The designated model value for the component.，这显然没有什么帮助......我经常在Vuetify中遇到这种情况。你是怎么解决的？ - scipilot

Answer 8

看起来你可以在v-tab上使用'tab-value'属性和在v-tab-item上使用'value'属性来使用除了索引之外的其他内容作为选项卡。

https://codepen.io/laventnc/pen/MWLPejM?editors=101

<div id="app">
  <v-app id="inspire">
    <v-card>
      <v-tabs
        v-model="tab"
        background-color="primary"
        dark
      >
        <v-tab
          v-for="item in items"
          :key="item.tab"
          :tab-value="item.tab"
        >
          {{ item.tab }}
        </v-tab>
      </v-tabs>
  
      <v-tabs-items v-model="tab">
        <v-tab-item
          v-for="item in items"
          :key="item.tab"
          :value="item.tab"
        >
          <v-card flat>
            <v-card-text>{{ `${tab} -- ${item.content}` }}</v-card-text>
          </v-card>
        </v-tab-item>
      </v-tabs-items>
    </v-card>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      tab: 'Two',
      items: [
        { tab: 'One', content: 'Tab 1 Content' },
        { tab: 'Two', content: 'Tab 2 Content' },
        { tab: 'Three', content: 'Tab 3 Content' },
        { tab: 'Four', content: 'Tab 4 Content' },
        { tab: 'Five', content: 'Tab 5 Content' },
        { tab: 'Six', content: 'Tab 6 Content' },
        { tab: 'Seven', content: 'Tab 7 Content' },
        { tab: 'Eight', content: 'Tab 8 Content' },
        { tab: 'Nine', content: 'Tab 9 Content' },
        { tab: 'Ten', content: 'Tab 10 Content' },
      ],
    }
  },
})

- laventnc