Vue.js 親要素のイベントを抑制する

入れ子になった要素で、親、子ともにv-on:clickなんかのイベントを持っている時、子の要素をクリックすると親の要素のイベントの発火する。

例えばこんなの。親divで何らかのイベント定義あり、divに入ったボタンがあるケース。divがアコーディオンになってて、ボタンが表示されるとかだとわかりやすいかな。

<div id="app1">
  <div  v-on:click="parentAction">
        <span>div</span>
        <div v-show="foobar"> アコーディオン<button v-on:click="childAction">Delete</button></div>
  </div>
</div>

で、どうやって親要素のイベントを抑制するかというと、簡単で子要素のv-on:clickに.stopという修飾子をつければよい。

<button v-on:click.stop="childAction">Delete</button></div>

これで親要素のイベント発火をキャンセルして子要素のみのイベントが実行される。

リンク