[続編]Vuetifyのコンポーネントからイベントを取得する方法その2[Vuetify, v-tab]

[続編]Vuetifyのコンポーネントからイベントを取得する方法[Vuetify, v-tab]

この記事は Vue 2.x 系、 Vuetify 2.x 系 を対象とした記事になります。
2022年3月、Vue 3.x 系統に対応した Vuetify 3 Beta がリリースされました。
Vuetify 3 Beta のインストールを試してみた記事もありますので、ぜひそちらもご覧ください。
対象の記事：Vuetify3 Betaをインストールしてみた件

この記事は、昨日の記事の続編です。

前回の記事では、v-tabs に @change を加えて、
子要素のタブが切り替わった際に、情報を取得する方法について書きました。

今回は、v-tabsの子要素として使う、
v-tab から取得できるイベントについて見ていきたいと思います。
(ややこしいですが、v-tabs は v-tab の親要素。
v-tab は個々のタブのラベル ≒ それを押して表示切り替えができる部分、になります)

v-tab がアクティブになった時に実行される、各種イベント

Vuetify の v-tab(個々のタブのラベル ≒ それを押して表示切り替えができる部分)は、
次の3つのイベントが取得できると公式に記載があります。
(1). change
タブがアクティブになったときに発生する。

(2). click
そのタブがクリックされた時に発生する。

(3). keydown
そのタブにキーボード経由で(Tabキーなどを使って)フォーカスを当てた後、
Enterキーを押すことで発生する。

v-tab API — Vuetify より。

(1). のchangeは単純に、
そのタブがアクティブになった時に発生します。値は void となっていて、$event を使っても返ってくる情報は特にありません。

(2). のclickは、このコンポーネント固有のイベントというよりは、
Vue.js の基本的な @click(v-on:click) で取得できるイベントと同じ挙動のようです。

クリックされた箇所の ClickEvent( PointerEvent ) が返ってくるので、
任意のclassを付与できたり、何らかの要素を足してあげたり、
いろいろ用途がありそうです。

(3). のkeydownは、公式には「Enterキーを押した時に発生」するとあります。
あまり効果的な使い道がすぐには浮かばなかったですが、
前後のUIでキーボード操作を多用している画面などでは、シームレスに操作できる点では
もしかしたら扱いやすいイベントなのかもしれません。
私の手元の環境では、一度キーボードのTabキー等で任意のv-tabをアクティブにした上でなければ発生しないイベントでした。
なお、公式ページにはENTERキーを押した時に発生とありますが、
私の手元の環境では、ENTERキー以外も検出される模様でした。

changeイベントの例

v-tab の change イベントの例です。

<v-tabs>
  <v-tab @change="changeTab()">Item One</v-tab>
  <v-tab @change="changeTab()">Item Two</v-tab>
  <v-tab @change="changeTab()">Item Three</v-tab>
</v-tabs>

↑各 v-tab に @change(v-on:change)を指定。
JavaScript側は次のように書くことで、発生を知ることが可能です。
ただし上で書いた通り戻り値が void となっているので、
単純にアクティブになったことを検知する以外では、あまり有効な使い方が思いつきません

changeTab() {
  console.log('is active');
}

clickイベントの例

v-tab に @click を設定して、発生したイベントの値を受け取る例です。

<v-tabs>
  <v-tab @click="clickTab($event)">Item One</v-tab>
  <v-tab @click="clickTab($event)">Item Two</v-tab>
  <v-tab @click="clickTab($event)">Item Three</v-tab>
</v-tabs>

↑各 v-tab に @click(v-on:click)を指定。
JavaScript側は次のように書くことで、発生を知ることが可能です。
4行目にあるように、targetの下に格納されている
outerTextあたりを見てみると、ちゃんとクリックされた対象の
要素がもつ値が返ってきていることがわかるかと思います。

clickTab(event) {
  console.log(event);
  // ↑クリックされた要素のイベント全体が返ってくる
  console.log('クリックされたタブ名:'+event.target.outerText);
  // ↑このように書くことで、クリックされた個々の要素の値を参照できる
}