兩個不同的v-on：同一元素內的點擊

Question

因此，第一個v-on點擊起作用，但是當我嘗試觸發下面的點擊時，沒有任何反應。我假設你真的不能嵌套不同onclicks這樣嗎？我不能只是使用相同的v-on click在這種情況下，因爲添加的類將觸發不同的行爲。

<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

您可以使用event modifiers與v-on:click阻止點擊事件的傳播，你的情況，你可以像下面：

<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>