【Vue.js】Vuetifyのv-tabsをscript側から制御する

概要

以下、Vue.jsのUIライブラリであるVuetifyの話です。
v-dialogにv-tabsを組み込んでいてv-dialogの表示非表示を変更した際、v-tabsは必ず1番目のものを表示する仕様にしたかった時のメモ。

つまるところv-tabsにおけるv-modelについてです。
v-tabsのマニュアルをソースまで見れば書かれているのですが、見出しや説明文からは判断がつかないのが曲者でした。

方法

<template>
  <v-tabs v-model="model">
    <v-tab href="#tab-1">タブ1</v-tab>
    <v-tab href="#tab-2">タブ2</v-tab>
    <v-tab href="#tab-3">タブ3</v-tab>
  </v-tabs>
  <v-tabs-items v-model="model">
    <v-tab-item value="tab-1">
      タブ1で表示するコンテンツ    
    </v-tab-item>
    <v-tab-item value="tab-2">
      タブ2で表示するコンテンツ    
    </v-tab-item>
    <v-tab-item value="tab-3">
      タブ3で表示するコンテンツ    
    </v-tab-item>
  </v-tabs-items>
</template>

<script>
export default {
  data () {
    return {
      model: 'tab-1'
    }
  }
}
</script>

v-tabsに関する部分だけを抜粋しています。意識する点としては

• v-tabsとv-tabs-itemsのv-modelは同じものを指定する
• v-tab-itemのvalueの値が各タブを指定するのに使用するキーの扱いになる
• v-tabのhrefの右辺はタブ指定用キーの値に#を付ける
• v-modelでバインドするデータは必ず正しく初期化する
  • v-tab-itemのvalueの値のいずれかをセットする
  • もしdata内でどのタブにも一致しない値を指定した場合、1つ目のタブが表示される

あとはmethod等からmodelにタブ指定用キーをセットすれば、そのコードの実行タイミングで任意のタブに移動します。

 this.model = 'tab-3'  //3つ目のタブに移動

私のケースだと、v-dialogの非表示or再表示時にセットすることで強制的に1つ目を表示させました。
ちなみにどのタブにも一致しない値を初期描画後にセットした場合も、1つ目のタブに移動すると思います。
もっと簡潔に書く方法があるような気がするのでどなたかご教授ください...。

参考

Vuetify公式 Tabs