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

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

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

対象の記事Vuetify3 Betaをインストールしてみた件

Vuetifyの各UIコンポーネントは、
「押された」
「状態が変更された」
等、なんらかのイベントが発生した瞬間に、Vue.js の methods に紐づけた関数が実行できたりします。

今回は、v-tabs コンポーネントを例にして、その「イベント取得の方法」を見ていきたいと思います。

現在アクティブなタブ番号を取得する

v-tabsで、現在アクティブなタブ番号を取得するには次のように書きます。

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

↑このように、v-tabsに @change (v-on:changeでも可。@はv-onの省略形)を指定
Vue.jsの $event 変数を使用してあげることで、
イベントが発生したv-tabsから、値を返すことができます。

@changeに紐づく関数は、methods内に次のように定義しておくことで、
現在アクティブなタブ番号を取得することが可能です。

methods: {
  nowActiveTab(event) {
    console.log(event);
  },
 // ...(省略)...

↑このように書いておくことで、コンソールには
現在アクティブなタブ番号が、0, 1, 2… のように 0始まりで帰ってきます。
この例では単純にコンソールに出力させているだけですが、
これを data と連動させるなどすれば、様々な操作が実現できそうですね。

各コンポーネントには取得可能なイベントがそれぞれ定義されている

これまで、当サイトではVuetifyの各種UIコンポーネントについて、
ご紹介する記事を複数書いてきました。

その記事内ではこれまで触れてきませんできたが、
実は、それぞれのコンポーネントには、
取得できる各種イベントがそれぞれ定義
されています。

例えば、上のセクションで書いた例で言うと
v-tabs コンポーネントは
change というイベントが起きた時を取得することが可能になっています。
v-tab API | Vuetify
↑こちらのVuetify公式の解説ページをみると、
v-tabs の change というイベントは

(1). ユーザの操作によってタブが変更されたときに発生する。
(2). href属性が各タブに設定されていれば文字列を返す。
(3). そうでない場合は数値を返す。

という仕様になっています。

つまり、上のセクションの例では (3). の状態で値が返ってきていて
タブ番号を取得することができていた、というわけです。

(2). のように、もし対象の各tabにhref属性が指定されていれば、その値を返すことも可能です。
つまり次のようなことです。

<v-tabs @change="nowActiveTab($event)">
  <v-tab href="#first">Item One</v-tab>
  <v-tab href="#second">Item Two</v-tab>
  <v-tab href="#third">Item Three</v-tab>
</v-tabs>

↑こうしておくと、各タブが切り替わったタイミングで
first
second
third
のように、hrefで指定している値を返すことができます。

先ほどのタブ番号の例同様に、この特性をうまく活用すると、
様々な操作が実現できそうですね。

この記事のまとめ

今回は、これまでVuetify関連の記事内で触れてこなかった
「各UIコンポーネントでイベントが発生した瞬間に関数を実行」
「そのUIコンポーネントが持っている値を返す」

ということについて、書いてみました。

今回は v-tabs を例にして、
単純に現在アクティブになっているタブ番号(あるいはhref属性の値)を返す、

ということについてを書いてみましたが、

他のコンポーネントでは
クリックされた場所の座標

そのUIコンポーネントまでの階層構造

などを取得できるものがあります。

今後の記事ではそれらについて、
他のコンポーネントでは
どんなイベントで、どんな値が取得できるのか、

より細かな部分について書いていけたらと思っています。

当サイトでは、今後も Vue.js および Vuetify に関する様々な記事を書いていく予定です。

※この記事は内容の品質向上を目的に、随時更新を行う場合があります。