preventイベント修飾子の動作確認をします。@submit.prevent
を利用すると、Formの送信前にバリデーション処理を入れるなどの活用ができます。
「@submit.prevent」 について
<form @submit.prevent action="/" method="POST">
<button type="submit">送信</button>
</form>
@submit.prevent
を利用すると preventDefaultメソッド
が実行されて、ブラウザ本来の挙動(formによる送信)が停止されます。
- preventDefaultメソッドについて
- こちら で取り上げています。
動作確認
下記パターンで動作確認してみます。
- ボタン1
@submit="onSubmit1"
なので送信されます。
- ボタン2
@submit.prevent="onSubmit1"
なので送信されません。
- ボタン3
@submit="onSubmit2"
ですが、onSubmit2メソッド
内部でevent.preventDefault()
を実行しているため送信されません。
Vue.component('my-component', {
methods: {
onSubmit1(event) {
window.alert('onSubmit1')
},
onSubmit2(event) {
window.alert('onSubmit2')
event.preventDefault()
}
},
template: `
<div>
<form @submit="onSubmit1" action="/" method="POST">
<button type="submit">ボタン1 送信されます</button>
</form>
<form @submit.prevent="onSubmit1" action="/" method="POST">
<button type="submit">ボタン2 送信されません(@submit.prevent)</button>
</form>
<form @submit="onSubmit2" action="/" method="POST">
<button type="submit">ボタン3 送信されません(event.preventDefault())</button>
</form>
</div>
`
})
new Vue({
el: '#content'
})