【Vue.js】Formの送信処理を制御（中断）する方法「@submit.prevent」
この記事では、Vue.jsを使ってForm送信処理を制御する方法について解説しています。submitしてPOSTする前に値チェックや特定の処理を挟みたい場合にご活用ください、初心者の方でもコピペですぐ使えます。
目次[ click ]
「@submit」を使用する方法
Formタグのv-on属性に@submitを設定する事でフォーム送信処理を制御（ブラウザ側のsubmit処理を中断）する事ができます。
①：完成コード
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEST</title>
<!-- 開発用 / Vue.js 2系 -->
<script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="app">
<form @submit="customSubmit">
<p>お名前：<input type="text" name="name" v-model="inputName"></p>
<p>会社名：<input type="text" name="company" v-model="inputCompany"></p>
<p><button type="submit">送信</button></p>
</form>
</div>
<script>
const app = new Vue({
el: "#app",
data() {
return {
inputName: "",
inputCompany: ""
}
},
methods: {
customSubmit() {
// 初期化
var err = "";
// 値チェック
if(this.inputName == "") err += "※お名前を入力してください\n";
if(this.inputCompany == "") err += "※会社名を入力してください\n";
// エラーがあれば出力、submit中断
if(err != "") {
window.alert(err);
event.preventDefault();
}
}
},
})
</script>
</body>
</html>13行目で、Formタグに「@submit」と自作したハンドラ（30行目）を設定する。フォーム送信時は自作したハンドラが実行され処理が走ります、その際にエラーがあれば「preventDefault()」（39行目）を発火させる事でsubmitを中断しています。
「@submit.prevent」を使用する方法
Formタグのv-on属性に@submit.preventを設定する事でフォーム送信処理を制御（ブラウザ側のsubmit処理を無効に）する事ができます。
①：完成コード
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEST</title>
<!-- 開発用 / Vue.js 2系 -->
<script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="app">
<form @submit.prevent="customSubmit">
<p>お名前：<input type="text" name="name" v-model="inputName"></p>
<p>会社名：<input type="text" name="company" v-model="inputCompany"></p>
<p><button type="submit">送信</button></p>
</form>
</div>
<script>
const app = new Vue({
el: "#app",
data() {
return {
inputName: "",
inputCompany: ""
}
},
methods: {
customSubmit() {
// 初期化
var err = "";
// 値チェック
if(this.inputName == "") err += "※お名前を入力してください\n";
if(this.inputCompany == "") err += "※会社名を入力してください\n";
// エラーがあれば出力、submit中断
if(err != "") {
window.alert(err);
}else {
// AjaxやForm送信を行う処理を書く ※ここではアラートを出しておきます
window.alert("送信！");
}
}
},
})
</script>
</body>
</html>13行目で、Formタグに「@submit.prevent」と自作したハンドラ（30行目）を設定しています。フォーム送信時は自作したハンドラが実行され処理が走りますがブラウザ側のsubmit処理は無効になりますので、42行目で送信処理を書きます。
終わりに
いかがでしたでしょうか。
「@submit」と「@submit.prevent」の使い分けとしては、フォーム送信の制御を簡単に実装したい場合は前者、SPAに組み込んだり最終的にAjaxで処理させたいなどの理由からブラウザ側のsubmit処理を完全に停めたい場合は後者といった感じですね。
もしくは両方とも使わず、送信ボタンをtype="button"に変更した上で、ボタンのv-on属性に@clickを設定してフォーム送信を制御する方法もありますが、この場合はフォーム内にあるメール形式チェック等が効かなくなるデメリットがあるので微妙かな。
結論、好きな方を使えばいいと思います。以上！笑
他の人が読んでいる記事
飲食→派遣→IT系ベンチャーに転職。
本業をベーシックインカムとし、やりたい事に挑戦するWebエンジニア。