Sometimes, we want to add an event listener to a component using the v-on directive with Vue.js.

In this article, we’ll look at how to add an event listener to a component using the v-on directive with Vue.js.

How to add an event listener to a component using the v-on directive with Vue.js?

To add an event listener to a component using the v-on directive with Vue.js, we should add the native modifier.

For instance, we write

<template>
  <div id="app">
    <router-link :to="to" @click.native="buttonClickHandler">
    </router-link>
  </div>
</template>

to set the add the native modifier to @click and set it to buttonClickHandler.

Then buttonClickHandler will run when we click on the router-link component.

Conclusion

To add an event listener to a component using the v-on directive with Vue.js, we should add the native modifier.