今回はVue.jsでのFormの送信について記載します。
自分で実装する中で想定通りにはいかない部分もあったので備忘録としてまとめようと思います。
@submitとは？
まず、@submitとはなんでしょうか？
<template>
<div>
<form @submit="handleSubmit">
<label for="username">ユーザー名:</label>
<input type="text" id="username" v-model="username" />
<label for="password">パスワード:</label>
<input type="password" id="password" v-model="password" />
<button>ログイン</button>
</form>
</div>
</template>
上記のようなtemplateを例にします。
ここでは、ログインボタンをタップすると、handleSubmitの処理が行われます。
buttonにクリックアクションをつけていないのにと思ったかもしれません。
buttonタグにはsubmit、reset、buttonを指定することができますが、何も指定していないとsubmitがデフォルトで設定されていることになります。
submitはフォームのデータをサーバーへ送信します。
そして、@submitは、formが送信されたときに呼び出されるカスタムイベントハンドラーです。 よって、ボタンをタップしたらhandleSubmitが実行されます。
例えば、buttonに@clickを追加することもできます。 ただし、メソッドが2回実行される可能性があるため、不要な処理が行われる恐れがあります。 そのため、通常はフォームの送信イベントだけを監視する@submitを使うのが適切だと思います。
@submitのイベント修飾子
@submitを使用すれば、formの内容を送信することができますが、1つ問題点がありました。
結果を含んだレスポンスが受け取れませんでした。
axiosを使用してバックエンドで処理を行った結果を受け取る予定でしたが、成功か失敗かわかりませんでした。
調べてみると画面がリロードされているよう...
さらに調べると、リロードされるのはImplicit submissionというHTMLの仕様のようでした。
submitボタンは無いがフォームのinput要素が1つだけの場合、もしくはフォームのinput要素が複数あるが、有効なsubmitボタンが存在する場合はImplicit submissionが発生すると記載があります。
なので、リロードしないようにする処理にする必要がありました。
ここでイベント修飾子を設定します。
イベントに修飾子をつけることでイベントハンドリングが簡単にできるようになります。
修飾子の書き方は@イベント.修飾子というように、イベントの後に「.」で繋いで記述します。また修飾子は複数繋げて記述することも可能です。
今回の場合には「@submit.prevent="handleSubmit」のようにprevent修飾子を使用することでリロードを防ぐことができます。
その他のイベント修飾子は参照に載せているVueのドキュメントに一覧が載っています。
最後に
HTMLの面とVueの面から確認するべき内容がありました。
当たり前ですが、Vue.jsで実装する上でHTMLの知識は前提として必要ですね(久々なので思い出さないと)
