[Vuetify]v-tabsの選択中タブをscriptで変更する

4889 ワード
Vue.js Vuetify Vue.js テキストリンク

Vuetifyのv-tabsは、以下のように利用するタブ型UIコンポーネントです。

<template>
  <v-tabs>
    <v-tab>Item One</v-tab>
    <v-tab>Item Two</v-tab>
    <v-tab>Item Three</v-tab>
  </v-tabs>
</template>


(※公式より引用)

タブをクリックすると、以下のように選択されているITEM xxxが変わります。

この「どのタブが選択されているか」という状態をscriptから制御してみます。

v-modelでバインドする

まず、scriptから操作するための前提として、v-modelでv-tabsを適当な変数でバインドします。

template
  <v-tabs v-model="tab">
    <v-tab>Item One</v-tab>
    <v-tab>Item Two</v-tab>
    <v-tab>Item Three</v-tab>
  </v-tabs>
script(data)
  data() {
    return {
      tab: null,
    }
  },

ここで、タブを切り替えたときの変数tabの動きを見てみましょう。
@changeを使って、v-tabsに変化が起きたときにtabの中身を出力します。

  <v-tabs v-model="tab" @change="log">
    <v-tab>Item One</v-tab>
    <v-tab>Item Two</v-tab>
    <v-tab>Item Three</v-tab>
  </v-tabs>

  methods: {
    log() {
      console.log(this.tab)
    },
  },

この状態でタブを順に押すと……

つまり、「v-tabs内のどのタブが選択されているか」という状態は、0から順に数字で管理されていることがわかりました。今回の例だと、0が"Item One"、1が"Item Two"、2が"Item Three"です。

scriptから選択中のタブを変更する

あとは簡単、先程バインドした変数'tab'を更新するだけです。
今回はcreatedフックで更新することで、初期表示時から選択中のタブを制御してみます。

  created: function () {
    this.tab = 1
  },

初期表示時から"Item Two"が選択されています。
無事、scriptからタブの選択状態を更新することができました。