Add event listener to <router-link> component using "v-on:" directive - VueJS

Question

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?

<template>    <router-link :to="to" @click="InlineButtonClickHandler">      {{ name }}    </router-link> </template>  <script type="text/babel"> export default {   props: {     to: { type: Object, required: true },     name: { type: String, required: true }   },   methods: {     InlineButtonClickHandler(event) {       this.$emit('appSidebarInlineButtonClick');     }   } }  </script> 

Answer 1

You need to add the .native modifier:

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

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

Answer 2

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

Maybe you can try this.