Vuetify：如何预选活动标签？

Posted 2023-02-22

【中文标题】Vuetify：如何预选活动标签？

【英文标题】：Vuetify: How to preselect active tab?

【发布时间】：2018-10-27 19:24:50

【问题描述】：

我想使用 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>

【参考方案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' 
      ]
    )
  

See it in action here

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

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

对于这个例子，我使用了 vuetify 版本：1.1.9

【参考方案2】：

使用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 - 当前选择的标签

【讨论】：

嗯，但是使用v-model 意味着我不能使用简单的属性。我已经制作了一个包装器组件，请参阅我自己的答案。

【参考方案3】：

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

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

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

【参考方案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>

【讨论】：

它对我不起作用，但如果我将数字作为键，它会很好地工作。我使用 v2.6.1 版本的 vue 和 2.2.29 版本的 vuetify。

【参考方案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>

一个非常基本的任务有很多代码，但它确实有效。

【参考方案6】：

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

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

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

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