複数のv-on:clickの処理について(vue.js)

Question

vue.jsについて質問です。

<ul>
 <li v-for="item in itemArray" v-on:click="hoge1">
  <div id="modal">
　　<p v-on:click="hoge2">ボタン{{item}}</p>
　</div>
 </li>
</ul>

<li>の要素に背景画像をcssで置いている前提です。 画像をクリックするとモーダルが出現、モーダル内のボタンをクリックすると別処理を行う流れです。

hoge1がモーダル(#modal要素)をdisplay:blockするメソッドで、
hoge2が別処理等をするメソッドなのですが、hoge1は効くのですが、hoge2をクリックしてもhoge1が発火してしまいます。

hoge1、hoge2どちらもうまく動作するための回避方法はあるのでしょうか？

Answer 1

v-on:click.stopで伝搬が解除できました。