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'
})

参考

• イベントハンドリング - Vue.js > イベント修飾子