[Vuetify] 親のイベントと子イベントをそれぞれ区別して発火させる
List – Vuetifyを見ながらリストを実装していたのだが、
v-list-tileのイベントと、その子であるv-list-tile-actionのイベントを実装すると、v-list-tile-actionをタップしたときに２つのイベントが同時に発火してしまった困ったのでその対策メモ
答えはここに書いてあるんだけど
@click.stop=”…
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
いや、それだけじゃ使い方全然わからんていう。
で、どうやるかというと、@click.stop=”呼びたいメソッド”を親と子、それぞれで定義してあげればいいみたいだった。
上の例題で言うならこんなかんじ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<v-list-tile v-for="item in items" :key="item.title" avatar @click.stop="onListTileItemClick()" <<<<<<<<<<<<<<<<<<<<< > <v-list-tile-avatar> <v-icon :class="[item.iconClass]">{{ item.icon }}</v-icon> </v-list-tile-avatar> <v-list-tile-content> <v-list-tile-title>{{ item.title }}</v-list-tile-title> <v-list-tile-sub-title>{{ item.subtitle }}</v-list-tile-sub-title> </v-list-tile-content> <v-list-tile-action> <v-btn icon ripple @click.stop="onButtonInfoItemClick()"> <<<<<<<<<<<<<<< <v-icon color="grey lighten-1">info</v-icon> </v-btn> </v-list-tile-action> </v-list-tile> |
なんとかなってめでたしめでたし。
