web-dev-qa-db-ja.com

「v-on：」ディレクティブを使用してイベントリスナーを<router-link>コンポーネントに追加する-VueJS

カスタム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>
vuejs2vue.jsvue-router
26
Evgeniy Miroshnichenko

.native修飾子 を追加する必要があります。

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

これは、router-linkコンポーネントのルート要素のネイティブクリックイベントをリッスンします。

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

たぶんこれを試すことができます。

3
许浩东

素敵な解決策は次のとおりです。

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

0
M U