Добавить прослушиватель событий <router-link> компонента с помощью «V-на:» директиву - VueJS

Question

Я пытаюсь добавить пользовательский обработчик InlineButtonClickHandler к click событиечрезвычайной <router-link> компонента, так что я могу испускать обычай appSidebarInlineButtonClick события.

Но мой код не работает. Что я делаю не так?

<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

Вы должны добавить .native modifier:

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

Это будет слушать родной щелкните событие корневого элемента из router-link Компонент.

Answer 2

хорошим решением было бы:

<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> 

Возможно, вы можете попробовать это.