Vue.jsを勉強中、イベント修飾子について、テストしていたら、詰まったのでメモします。
かなり初歩的なことですが、気づけず時間をかけてしまったので....（ᓀ‸ᓂ）ﾊﾞﾆ....
1.間違っていたコード
App.vue
<h1> {{ price }}</h1>
<div>
<button @click.stop.prevent="increment()">増やす</button>
</div>
increment()でpriceの数が加算される仕組みにしています。
clickイベントに.stopをつけて起動しないようにしているのですが、なぜか起動してしまいました。
2.修正したコード
App.vue
<h1> {{ price }}</h1>
<div @click="increment()">
<button @click.stop.prevent="">増やす</button>
</div>
</div>
これで動かなくなりました！！
3.なぜこのようなことが起きたのか？
個人的に引っかかったので図にしてまとめてみました。
慣れている人はともかく、一度勘違いしてしまうとはまっちゃいそうですね...笑
子のbuttonに書かれているclickが無事起動したら、親のclickが起動する仕組みになっているようです。
【実行順序】
子要素のイベント
↓
親要素のイベント(子が起動しなければ起動しない。)
①のclickには、stopの例外処理のようなもと認識していて、基本機能はストップさせたいけど、ストップさせた後、この処理だけはやってほしいといったときに使うようです...!