やりたいこと

　"フォームを送信する前に確認をはさみたい" というのはよくあることだと思います。この記事では、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を使ってるプロジェクトではどうやるのがスマートなの？"という疑問への答えになっていれば幸いです。