この記事は 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 に関する様々な記事を書いていく予定です。
※この記事は内容の品質向上を目的に、随時更新を行う場合があります。