2つの異なるv-on：同じ要素内でのクリック

Question

最初のv-onクリックは機能しますが、その下にあるものをトリガーしようとすると何も起こりません。私はあなたが本当に異なる入れ子にすることはできないと仮定していますonclicksこのような？この場合、追加されたクラスが異なる動作を引き起こすので、同じv-on clickを使用することはできません。あなたはあなたのケースでのクリックイベントの伝播を停止するv-on:clickでevent modifiersを使用することができます

<div id="menu"> 
    <div class="menu" v-on:click="toggle" v-bind:class="{ active: isActive }"> 
     Hey 
     <div class="m-items animated slideInRight" v-on:click="change" v-bind:class="{ display: display }"> 
      <ul> 
       <li><i class="fa fa-toggle-off" aria-hidden="true"></i>Hey</li> 
      </ul> 
     </div> 
    </div> 
</div> 

var menu = new Vue({ 
    el: '#menu', 
    data: { 
    isActive: false, 
    }, 

    methods: { 
    toggle: function(event) { 
     this.isActive = !this.isActive 
    } 
    } 
}) 

var displayList = new Vue({ 
    el: '.m-items', 
    data: { 
    display: false, 
    }, 

    methods: { 
    change: function(event) { 
     this.display = !this.display 
    } 
    } 
}) 

Answer 1

は、次のようにそれを行うことができます。

<div id="menu"> 
    <div class="menu" v-on:click="toggle" v-bind:class="{ active: isActive }"> 
     Hey 
     <div class="m-items animated slideInRight" v-on:click.stop="change" v-bind:class="{ display: display }"> 
      <ul> 
       <li><i class="fa fa-toggle-off" aria-hidden="true"></i>Hey</li> 
      </ul> 
     </div> 
    </div> 
</div>