【Vue.js】router-linkにv-on:clickを効かせる

こんにちは!@Higemuraです!

Vue.jsのrouter-linkをクリックした時にdata属性を変更したかったのですが、普通にv-on:clickをつけただけでは動作しません。

nativeを付与することによってrouter-linkのv-on:clickを操作することができます。

v-on:click.native で解決

Vue.jsのrouter-link機能にはv-on:clickを元々サポートしていないみたいです。

しかしv-on:clickにnativeという修飾子を追加することで動作するようになります。

これでWebサイトでよく使われる「メニューボタン」をクリックしたらメニューが表示され、「メニュー内のリンク」をクリックしたらメニューを非表示にすることが可能になります。

 

どうでしょうか?nativeを追記するだけで「router-link」でもv-on:clickが簡単に使用できました!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です