Vue spreads the @click attribute to all its children, which is unexpected and weird Vue spreads the @click attribute to all its children, which is unexpected and weird vue.js vue.js

Vue spreads the @click attribute to all its children, which is unexpected and weird


If there are two elements element 1 and element 2 . element 2 is inside element 1 and we attach an event with both the elements lets say onClick. Now when we click on element 2 then eventHandler for both the elements will be executed. Now here the question is in which order the event will execute. If the event attached with element 1 executes it is called event capturing and if the event attached with element 2 executes first this is called event bubbling. As per W3C the event will start in the capturing phase untill it reaches the target comes back to the element and then it starts bubbling

You can find nice explanation here and What is event bubbling and capturing?. There are already questions on Child element click event trigger the parent click event.


In your case, you can try using vue event modifiers, there are .stop and .capture, which might help or you can put the onclick event only on relevant component as well, like this:

<li class="nav-item dropdown">  <a href="#demo" class="nav-link dropdown-toggle"        v-on:mouseenter="openMenu"      v-on:mouseleave="closeMenu"      v-on:click="clickMenu">DEMO</a>  <ul class="dropdown-menu">    <li class="dropdown-item"><a href="#">Demo 1</a></li>    <li class="dropdown-item"><a href="#">Demo 2</a></li>  </ul></li>

Try using .v-on:click.self, as the documentation says

only trigger handler if event.target is the element itself i.e. not from a child element