vuejsのクリック伝播を防ぐ/停止する方法

Question

私は再帰的リスト（ツリー）を持ち、各要素は@click="sayHello(el.id)"です。私は、要素をクリックした場合

list-element-0-01 
├──list-el-1-01 
│ └──list-el-2-01 
└──list-el-1-02 
    └──list-el-2-02 

：：今の問題は、それは次のようにネストされたリストであることから、あるlist-el-2-01その後、私は正確にそのためには

> "list-el-2-01" 
> "list-el-1-01" 
> "list-el-0-01" 

の出力を取得します。私は、htmlを見て、それを得る意味：

<ul> 
    <li @click="sayHello('list-el-0-01')"> one-one 

    <ul> 
     <li @click="sayHello('list-el-1-01')"> two-one 
     <ul> 
      <li @click="sayHello('list-el-2-01')"> three-one </li> // I click this 
     </ul> 
     </li> 

     <li @click="sayHello('list-el-1-02')"> two-two 
     <ul> 
      <li @click="sayHello('list-el-2-02')"> three-two </li> 
     </ul> 
     </li> 
    </ul> 

    </li> 
</ul> 

私はすべてのラッピング要素を何とかクリックしていることは意味があります。私の質問 - ちょうど正確な要素がクリックイベントを発生させる方法はありますか？

Answer 1

としてあなたは.stopイベント修飾子を使用してプロパゲーションを停止することができます：https://vuejs.org/v2/guide/events.html#Event-Modifiers

：今イベントは、親イベント修飾子のリストに

詳細に伝播されることはありません

@click.stop="sayHello"