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-tabs v-model="activetab_href_variable">：

> CreateProcess error=216, This version of %1 is not compatible with the
> version of Windows you're running. Check your computer's system
> information to see whether you need a x86 (32-bit) or x64 (64-bit)
> version of the program, and then contact the software publisher

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

v-model字符串 - 当前选定的标签

Answer 2

要实现此目的，您可以将当前选项卡存储在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>

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

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

现在，您可以通过点击/page?tab=one之类的链接来打开特定的标签（适用于按钮，路由器链接，与某人共享标签链接等）

此解决方案适用于Vuetify.js2.x。我写了一篇简短的文章，其中包含完整的代码示例，对其进行了详细说明：https://medium.com/untitled-factory/linking-to-a-specific-tab-in-vuetify-js-d978525f2e1a

Answer 3

要预选择活动标签：

r'(\n|\r)'

脚本部分：

   <v-tabs grow v-model="active_tab">
     <v-tab v-for="tab of tabs" :key="tab.id">
       {{tab.name}}
     </v-tab>
   </v-tabs>

See it in action here

注意：我们已预先选择名称为tab3的标签。

请记住，vuetify会将export default { data: () => ({ active_tab: 2, tabs: [ { id: 1, name: 'tab1' }, { id: 2, name: 'tab2' }, { id: 3, name: 'tab3' } ] }) }设置为活动标签的索引。因此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 {
   ...
   mounted() {
     this.selectedTab = 'first';
   },
   ...
}
</script>

Answer 5

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

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

我用this。$ refs

解决了这个问题

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

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

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

Vuetify：如何预选活动标签？

6 个答案: