向 <router-link> 添加事件监听器使用“v-on:"的组件指令 - VueJS [英] Add event listener to &lt;router-link&gt; component using &quot;v-on:&quot; directive - VueJS

问题描述

我正在尝试将自定义处理程序 InlineButtonClickHandler 添加到 组件的 click 事件，以便我可以发出自定义 appSidebarInlineButtonClick 事件.

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>

推荐答案

您需要添加 .native 修饰符:

You need to add the .native modifier:

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

这将监听 router-link 组件的根元素的原生点击事件.

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

这篇关于向 <router-link> 添加事件监听器使用“v-on:"的组件指令 - VueJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！