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からタブの選択状態を更新することができました。