##やりたいこと
"フォームを送信する前に確認をはさみたい" というのはよくあることだと思います。この記事では、Vueを導入しているプロジェクトのもとで、ブラウザの confirm()※確認ダイアログ を使ってそれを実現する場合にはどうすべきかを解説します。注意点として、フォームの送信は通常のブラウザからの送信であり、axiosは用いていないものとします。
##サンプル
See the Pen Confirmation form using browser confirm window by ひろ@技術アカ (@hyaroy_pg) on CodePen.
CodePenで作成したサンプルです。次のような挙動を示すことを確認してください。
- SUBMITボタンを押すと確認ダイアログが表示される
- 確認ダイアログでキャンセルを押すと何も起きない
- 確認ダイアログでOKを押すと画面が白くなる
まずSUBMITボタンを押すとコンファームが表示されます。本来ならばボタンを押せばフォームがそのまま送信されていしまいますが、後述する @submit によってフォームの送信が抑制されています。
次に表示されたコンファーム画面でキャンセルを押したときの挙動ですが、文字通りフォーム送信がキャンセルされますので何も起きません。
そして最後にOKを押した際の挙動ですが、画面が白くなります。これはフォームが送信されたことを意味します。あくまでもサンプルであり、フォームの送信先がダミー値なためにこのようになります。
##解説
通常のフォームと変わらない部分の説明は割愛し、それぞれ肝となる箇所を解説していきます。
###@submit
<!--@submmitディレクティブでフォーム送信に割り込む-->
<form method="post" @submit="submit()" action="/">
new Vue({
el: '#app',
methods: {
// 呼び出されるメソッド
submit(){
const ans = confirm('Register?');
if(!ans) event.preventDefault();
}
}
});
<form>タグ中の@submitディレクティブによって、フォームがそのまま送信されてしまうことを抑制し、Vueのメソッドを割り込ませることができます。サンプルでは "@submit="submit()" としてVueインスタンスの submit() メソッドを呼び出しています。
###confirm()
new Vue({
el: '#app',
methods: {
submit(){
const ans = confirm('Register?'); // 確認ダイアログの表示
if(!ans) event.preventDefault();
}
}
});
confirm() の記述によって確認ダイアログを表示させます。変数ansにはユーザの反応結果がtrue/falseで格納されます。
###event.preventDefault()
new Vue({
el: '#app',
methods: {
submit(){
const ans = confirm('Register?');
if(!ans) event.preventDefault(); // 「キャンセル」押下ならば event を抑制
}
}
});
キャンセル押下時にフォームをキャンセルする処理をしたいので、条件式としては "if(!ans)" となります。そして event.preventDefault と続きます。この記述によってフォームの送信が実際にキャンセル(抑制)されます。
キャンセルしなければ勝手にフォームが送信されます。フォームの送信に何らかのコードの記述は不要です。
##おわりに
確認ダイアログをフォームで利用すること自体は何でもないことですが、"Vueを使ってるプロジェクトではどうやるのがスマートなの？"という疑問への答えになっていれば幸いです。