How to Stop Event Propagation in Vue.js?

To stop event propagation in Vue.js, you can use the .stop event modifier. Consider for example, an anchor tag where you wish to stop event propagation on click. You could do that in the following way:

<a @click.stop="doSomething">Foo</a>

By introducing event modifiers, Vue.js intends to promote the idea of event handling logic to be purely about data rather than having to deal with DOM event details in there.

Please note that it is also possible to chain different event modifiers together. For example, @click.stop.prevent would stopPropagation and preventDefault.

This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.