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

Question

I am trying to add a custom InlineButtonClickHandler handler to the <router-link> click <router-link> event so that I can appSidebarInlineButtonClick custom appSidebarInlineButtonClick event.

But my code is not 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 for its own click event of the root element of the router-link component.

Answer 2

a good solution would be:

<a v-link='{name: "home"}' v-on:click.capture='InlineButtonClickHandler'>Home</a>

Answer 3

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

Perhaps you can try this.