Ajouter un écouteur d'événements au composant <router-link> à l'aide de la directive "v-on:" - VueJS

Question

J'essaie d'ajouter un gestionnaire personnalisé InlineButtonClickHandler à l'événement <router-link> D'un composant click, afin de pouvoir émettre un événement appSidebarInlineButtonClick personnalisé.

Mais, mon code ne fonctionne pas. Qu'est-ce que je fais mal?

<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

Vous devez ajouter le .native modificateur :

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

Cela écoutera l'événement de clic natif de l'élément racine du router-link composant.

Answer 2

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

Vous pouvez peut-être essayer cela.

Answer 3

une bonne solution serait:

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