LoginSignup
5
3

More than 3 years have passed since last update.

Vue.jsでユーザーのEnter入力時にformをsubmitさせない方法

Last updated at Posted at 2020-01-04

結論

対象のformタグに以下のv-on属性を設定する。


@submit.prevent

説明

formのsubmitという動作が発生する事を防ぐ(prevent)。
formのsubmitはブラウザ自体の挙動です。formの各要素(テキストエリアなど)でエンターキーを入力すると、submitが発火します。上記コードでそれを防ぐ事ができます。ちなみに、ブラウザのデフォルトの挙動ではなく、お好きな関数(ここではcustomFunction)を実行したい場合は以下のとおり書きます。


@submit.prevent="customFunction"

同様の事例

たとえば何らかのファイルのドラッグドロップで発火する処理(ここではdropFunction)を設定したい場合、デフォルトだと、ドロップされたファイルがブラウザで開かれてしまいます。それを回避するには以下のとおり書きます。


@dragover.prevent
@drop.prevent="dropFunction"

dropイベントのみ必要であっても、dragoverのpreventも併記してください(技術的理由はわかりませんが、dropだけpreventしても適切に動作しません)。

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3