【Vue】@submit.preventのpreventメソッドは何をしているか？（v-on:submit.prevent）

Vueのイベントで@submit.prevent="イベント名"のように、イベントの後ろにpreventメソッドがついている場合がある。

このpreventメソッドがどういう処理をしていて、実際にどう使えばいいかの実例。

##.prevent
イベント修飾子とよび、v-onディレクティブを修飾し、event.preventDefaultを呼び出す。

イベントにデフォルトで設定されている処理を実行しない。

使い方

@イベント名.prevent = "メソッド名"

###設定されている処理を実行しないとは？
例えばフォームのsubmitイベントの場合、クリックすると情報を送信した後にaction属性で指定したページリダイレクトする。.preventを使うと、このリダイレクト処理を実行しなくなる。（フォームページのまま）

＞Vue公式 イベント修飾子

##実例
送信後にgoogleトップにリダイレクトをかけるフォームを２つ用意。上は通常のsubmitイベントで、下は.preventを設定した場合。

.preventがある場合は、送信後もリダイレクトせずに元もページのままになる。

.html

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <div>
    <p>@submit</p>
    <form @submit="sendAction" action="https://google.com">
      <input type="text"　v-model="message">
      <br>
      <input type="submit" value="送信">
    </form>
  </div>
  <hr>
  <div>
    <p>@submit.prevent</p>
    <form @submit.prevent="sendPrevent" action="https://google.com">
      <input type="text" v-model="messagePrevent">
      <br>
      <input type="submit" value="送信">
    </form>
  </div>
</div>

<script src="vue.js"></script>

vue.js

const app = new Vue({
  el: "#app",
  data: {
    message: '',
    messagePrevent: ''
  },
  methods: {
    sendAction() {
      alert(`「${this.message}」を送信。リダイレクトします`)
    },
    sendPrevent() {
      alert(`「${this.messagePrevent}」を送信。リダイレクトしません`)
    }
  }
})

##submit以外のイベント もちろん、submit以外のイベントでも使える。 .stop修飾子と組み合わせて使うことも可能。

@submit.stop.prevent = "メソッド名"
@dragover.prevent.stop="onDragOver"
@dragleave.prevent.stop="onDragLeave"
@drop.prevent.stop="onDrop"
,
,
,

＞Vue.jsで使えるイベントの一覧