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

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

v-model String - Current selected tab

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

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

Answer 4

在托管 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>

Answer 5

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

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

tab1 的文本 tab2 的文本 tab3 的文本

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

Answer 6

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

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

第一个有用的步骤（但不是 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
    }
  }
}

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

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

Vuetify：如何预选活动选项卡？

Vuetify: How to preselect active tab?

vue.js

vuetify.js