Vuetify:如何预选活动标签? [英] Vuetify: How to preselect active tab?

问题描述

我想使用 Vuetify (v1.0.18) 来渲染一些使用 v-tabs 的静态导航.路由是在服务器端完成的，所以我需要一种通过属性设置活动选项卡的方法.这是一项非常基本的任务，但我没有让它发挥作用.示例:

I want to use Vuetify (v1.0.18) to render some static navigation using v-tabs. The routing is done on the server side, so I need a way to set the active tab by properties. It's a very basic task, but I don't get it to work. Example:

<v-tabs>
  <v-tab href="/path1">Tab 1</v-tab>
  <v-tab href="/path2">Tab 2</v-tab>
</v-tabs>

这会预选第一个选项卡 - 很好.

This preselects the first tab - fine.

现在的问题是:如何预选第二个标签?以下操作不起作用:

Now the question ist: How to preselect the second tab? The following does not work:

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

推荐答案

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

As a workaround I made a wrapper component:

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

为一项非常基本的任务编写了大量代码，但它确实有效.

Lots of code for a very basic task, but it works.

这篇关于Vuetify:如何预选活动标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！