フォームを送信する前にブラウザの確認ダイアログを表示する(Vue編)

やりたいこと

　"フォームを送信する前に確認をはさみたい" というのはよくあることだと思います。この記事では、Vueを導入しているプロジェクトのもとで、ブラウザの confirm()※確認ダイアログ を使ってそれを実現する場合にはどうすべきかを解説します。注意点として、フォームの送信は通常のブラウザからの送信であり、axiosは用いていないものとします。

サンプル

See the Pen Confirmation form using browser confirm window by ひろ@技術アカ (@hyaroy_pg) on CodePen.

　CodePenで作成したサンプルです。次のような挙動を示すことを確認してください。

• SUBMITボタンを押すと確認ダイアログが表示される
• 確認ダイアログでキャンセルを押すと何も起きない
• 確認ダイアログでOKを押すと画面が白くなる

　まずSUBMITボタンを押すとコンファームが表示されます。本来ならばボタンを押せばフォームがそのまま送信されていしまいますが、後述する @submit によってフォームの送信が抑制されています。
　次に表示されたコンファーム画面でキャンセルを押したときの挙動ですが、文字通りフォーム送信がキャンセルされますので何も起きません。
　そして最後にOKを押した際の挙動ですが、画面が白くなります。これはフォームが送信されたことを意味します。あくまでもサンプルであり、フォームの送信先がダミー値なためにこのようになります。

解説

　通常のフォームと変わらない部分の説明は割愛し、それぞれ肝となる箇所を解説していきます。

@submit

sample.html

<!--@submmitディレクティブでフォーム送信に割り込む--> 
<form method="post" @submit="submit()" action="/">

sample.js

new Vue({
  el: '#app',

  methods: {

    // 呼び出されるメソッド
    submit(){
      const ans = confirm('Register?');
      if(!ans) event.preventDefault();
    }

  }
});

<form>タグ中の@submitディレクティブによって、フォームがそのまま送信されてしまうことを抑制し、Vueのメソッドを割り込ませることができます。サンプルでは "@submit="submit()" としてVueインスタンスの submit() メソッドを呼び出しています。

confirm()

sample.js

new Vue({
  el: '#app',

  methods: {

    submit(){
      const ans = confirm('Register?'); // 確認ダイアログの表示
      if(!ans) event.preventDefault();
    }

  }
});

confirm() の記述によって確認ダイアログを表示させます。変数ansにはユーザの反応結果がtrue/falseで格納されます。

event.preventDefault()

sample.js

new Vue({
  el: '#app',

  methods: {

    submit(){
      const ans = confirm('Register?'); 
      if(!ans) event.preventDefault(); // 「キャンセル」押下ならば event を抑制
    }

  }
});

キャンセル押下時にフォームをキャンセルする処理をしたいので、条件式としては "if(!ans)" となります。そして event.preventDefault と続きます。この記述によってフォームの送信が実際にキャンセル(抑制)されます。
キャンセルしなければ勝手にフォームが送信されます。フォームの送信に何らかのコードの記述は不要です。

おわりに

確認ダイアログをフォームで利用すること自体は何でもないことですが、"Vueを使ってるプロジェクトではどうやるのがスマートなの？"という疑問への答えになっていれば幸いです。