is there a way to use more than one action on a li element?

Question

If I click on the i tag inside the li tag it only triggers the goTo() function and not the byebye() function.

Is there a easy way to decide, if either the li or the a tag got clicked?

<ul>
  <li @click="goTo(list)">
    Check me up! <i @click="byebye(list)" class="fas fa-ban"></i>
  </li> 
</ul>

Answer 1

One way to handle this would be to call a single function that then calls two other functions. So you call goToAndByeBye(list) which then calls goTo() and byebye(list) .

I believe you can also seperate two function calls like so:

<i @click="byebye(list); gotTo()">

If you want to figure out what element the event was called from, consider passing $event as a parameter in your HTML function call, which will contain information about the calling element.

Answer 2

As per my comment: you can use the event modifier, .stop , to prevent the click event from bubbling up to the <li> parent: see proof-of-concept:

 new Vue({ el: '#app', methods: { goTo: function() { console.log('goTo'); }, byebye: function() { console.log('byebye'); } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <ul> <li @click="goTo()"> Check me up! <i @click.stop="byebye()" class="fas fa-ban">ICON</i> </li> </ul> </div>