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

個人開発したアプリの宣伝
目的地が設定できる手帳のような使い心地のTODOアプリを公開しています。
Todo with Location

Todo with Location

  • Yoshiko Ichikawa
  • Productivity
  • Free

スポンサードリンク

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

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

f:id:letitride:20190730184259p:plain

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

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