Vue.js のイベント装飾子で preventDefault と stopPropagation

2017年8月27日

Vue.js 2では、テンプレートでイベント装飾子を使うと簡単にpreventDefaultやstopPropagationを定義できます。

参考：
イベントハンドリング – Vue.js

event.preventDefault -> .prevent

<a href="#" @click.prevent="ファンクション">link</a>

event.stopPropagation -> .stop

<a href="#" @click.stop="ファンクション">link</a>

重ね付け

<a href="#" @click.prevent.stop="ファンクション">link</a>

サンプル

formの枠をクリックで背景色が点滅
リンク先の設定してあるリンクにclickイベントを付与し、.preventと.stopのサンプル
actionでURLが設定してあるformのbuttonにclickイベントを付与し、.preventと.stopのサンプル

See the Pen Vue.js event modifier by webdev (@webdev-jp-net) on CodePen.0

関連記事