web-dev-qa-db-ja.com

Vuetify：アクティブなタブを事前選択する方法

v-tabsを使用して、Vuetify（v1.0.18）を使用して静的ナビゲーションをレンダリングしたい。ルーティングはサーバー側で行われるため、プロパティによってアクティブなタブを設定する方法が必要です。これは非常に基本的なタスクですが、動作しません。例：

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

これにより、最初のタブが事前に選択されます-正常です。

質問は次のとおりです。2番目のタブを事前選択する方法は？以下はnot動作します：

<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>
vue.jsvuetify.js
8
Georg Ledermann

回避策として、ラッパーコンポーネントを作成しました。

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

非常に基本的なタスクのための多くのコードですが、動作します。

0
Georg Ledermann

アクティブなタブを事前選択するには：

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

実際の動作をご覧ください

注：tab3という名前のタブを事前選択しています。

Vuetifyはactive_tabをアクティブなタブのインデックスに設定することに注意してください。したがって、id 3のアイテムのインデックスは0から始まるため2です。

この例では、vuetifyバージョン1.1.9を使用しました

7
roli roli

つかいます v-model：

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

現在のバージョンのドキュメントには（2018年5月17日）それに関する情報はありませんが、0.17（ https://vuetifyjs.com/releases/0.17/#/components/tabs ）には以下があります：

v-model文字列-現在選択されているタブ

4
ndpu

_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>
_
1
Vamshi Krishna

これでこれを解決しました。$ refs

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

Tab1のテキストtab2のテキストtab3のテキスト

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