[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=”呼びたいメソッド”を親と子、それぞれで定義してあげればいいみたいだった。
上の例題で言うならこんなかんじ

<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>

なんとかなってめでたしめでたし。