こんにちは、@codeship_techです。
本日の質問がこちら。
vueのclickアクションなどに.prevent をつけた時とつけない時では何が違いますか？
ということで、JavaScriptについての質問ですね。
実際にvueのClickアクションに.preventをつけた時とつけない時でこのように記述が変わりますが、挙動ではどのような変化があるのでしょうか？
prevent付けた時:
<a v-on:click.prevent="doThis"></a>
prevent付けない時:
<a v-on:click="doThis"></a>
それではこちらの質問に答えていきます。
.preventはJavascriptの構文のEvent.preventDefaultメソッドが実行されます。
Event.preventDefaultはhtmlをjavascriptで扱うdomで、デフォルトで発動するアクションを無効化してくれます。
そもそもデフォルトで発動するアクションとは
- 「aタグ」での「click」した時、aタグのherfで指定されたURLへ遷移する
- 「formのチェックボックス」での「click」時、チェックボックスのオン/オフが切り替わる
- inputタグの「submit」での「click」された時、actionで指定されたURLへ遷移＋データ送信
などです。
これらのデフォルトのアクションを無効化してくれるのが、Event.preventDefaultになります。
本日は、vueのclickアクションに.preventをつけた時の挙動について解説しました。
