【Nuxt.js/Vue Router】nuxt-linkにv-on:clickを設定する方法

はじめに

この記事では、Nuxt.jsの「」にv-on:clickを設定する方法を紹介します。

click.nativeを使用する

nuxt-linkにクリックイベントを設定するときは、clickだと反応しない。
click.nativeが必要。

— aiiro@フリーランスエンジニア (@aiiro29) 2019年5月20日

nuxt-linkは@clickと設定しただけだと、そのイベントは動きません。

nuxt-linkにクリックイベントを設定するには「Vue Router」と同様に、clickの後ろに「.native」と続けて書く必要があります。

nuxt-linkがクリックされたときに、hideメソッドを実行する例を下記に示します。

<nuxt-link @click.native="hide" :to="{path: 'menu'}">メニュー</nuxt-link>

参考

How do we v-on:click nuxt-link? · Issue #1786 · nuxt/nuxt

How do we v-on:click nuxt-link? I've been trying to toggle a click on a nuxt-link but seems like nothing is working... This question is available on Nuxt.js com...

github.com