Vue.js – Add event listener to component using “v-on:” directive – VueJS


I'm attempting to add a custom handler InlineButtonClickHandler to a <router-link> component's click event, so that I can emit a custom appSidebarInlineButtonClick event.

But, my code isn't working. What am I doing wrong?

   <router-link :to="to" @click="InlineButtonClickHandler">
     {{ name }}

<script type="text/babel">
export default {
  props: {
    to: { type: Object, required: true },
    name: { type: String, required: true }
  methods: {
    InlineButtonClickHandler(event) {

Best Solution

You need to add the .native modifier:


This will listen to the native click event of the root element of the router-link component.