使用“v-on:”指令向 <router-link> 组件添加事件监听器 - 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 .

但是，我的代码不起作用。我究竟做错了什么？

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

原文由 Evgeniy Miroshnichenko 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要添加 .native 修饰符：

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

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

原文由 thanksd 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

也许你可以试试这个。

原文由 Stackoverflow 发布，翻译遵循 CC BY-SA 3.0 许可协议