Vue/Nuxtで開発しているときに、何度も調べなおすので、まとめてみた。
修飾子の一覧
<!-- クリックイベントの伝搬が止まります --> <a v-on:click.stop="doThis"></a> <!-- submit イベントによってページがリロードされません --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修飾子は繋げることができます --> <a v-on:click.stop.prevent="doThat"></a> <!-- 値を指定せず、修飾子だけ利用することもできます --> <form v-on:submit.prevent></form> <!-- イベントリスナーを追加するときにキャプチャモードで使います --> <!-- 言い換えれば、内部要素を対象とするイベントは、その要素によって処理される前にここで処理されます --> <div v-on:click.capture="doThis">...</div> <!-- event.target が要素自身のときだけ、ハンドラが呼び出されます --> <!-- 言い換えると子要素のときは呼び出されません --> <div v-on:click.self="doThat">...</div> <!-- コンポーネントのルート要素にあるネイティブイベントを購読したい場合、.native 修飾子をつける。--> <base-input v-on:focus.native="onFocus"></base-input>
公式ドキュメントのガイドより - イベントハンドリング — Vue.js - カスタムイベント — Vue.js
.nativeはnuxt-linkのときも使う
nuxt-linkは@clickと設定しただけだと、そのイベントは動きません。
nuxt-linkにクリックイベントを設定するには「Vue Router」と同様に、clickの後ろに「.native」と続けて書く必要があります。
nuxt-linkがクリックされたときに、hideメソッドを実行する例を下記に示します。
