[Vue.js/Nuxt.js] <nuxt-link>に@clickを付ける場合は@click.nativeの記述にしなければ動かない

Last updated at 2019-04-04Posted at 2019-04-04

概要

nuxt-linkの拡張元のrouter-linkではv-on:clickをサポートしていないため、ネイティブイベントを呼び出す必要があるみたいです。

タイトルの通り、@click でなく @click.native を使用しましょう。

@click="method"

@click.native="method"

また、クリックイベントのイベント修飾子を使用したい場合はnativeに続けて記述します。

@click.native.stop

のように書けばOKです。

動作しているか確認したい場合は以下のように記述すれば大丈夫だと思います。

@click.native.stop="handler"

~略~

methods: {
  handler() {
    console.log('stop');
  }
}

検索してもなかなか情報が転がっていなかったのですが、ネイティブイベント=DOMが基本的にサポートされているイベントのことなんですかね？

検索すると結構情報が転がっていました。

ここが一番詳しいかも