How to isolate click event handler between parent and child elements in vuejs

Question

I'm trying to convert semantic-ui component to rely on vuejs instead of jQuery, but I don't know how to isolate v-on:click between child and it's parent element.

In this example below, I'm using v-on:click with a button which will show dropdown menu using a toggle function and there's another v-on:click assigned to delete icon, which will trigger another function.

The problem is, while I'm clicking on the delete icon, the dropdown menu will show-up.

How can I prevent this from happening?

`https://jsbin.com/minezij`

Answer 1

You can use stop Event Modifiers to stop the propagation of the event to parent elements.

<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>