Vuetify:如何预选活动选项卡?

要预选活动选项卡,请执行以下操作:

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

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

在本例中,我使用了vuetify版本:1.1.9

使用 v-model :

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

当前版本的文档中没有关于它的信息(2018年5月17日),只有0.17( https://vuetifyjs.com/releases/0.17/#/components/tabs )请记住:

v型字符串-当前选定选项卡

为了实现这一点,您可以将当前选项卡存储在URL中,或者作为 nested route 或作为查询参数。

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

1. 第一个有用的步骤(但并非百分之百必须)是给选项卡命名,这样我们就可以通过名称而不是序号来引用它们。这可以通过指定 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>

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

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

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

对于一个非常基本的任务,有很多代码,但它是有效的。

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

我用这个解决了这个问题$裁判

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

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

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