Vueと共通

【Nuxt.js】Nuxt文法編:@submit

前置き

今回はイベントハンドラ の一種、
@submitについて🌟

基本的な記法や
イベントの種類、
イベント修飾子などは
こちらで既に解説済みです🎀👩‍🏫

@submitの使用例を
主に解説していきます💡


@submit

イベントの種類

MDN
submitイベントは<form>が
送信された時に発生します📤
formタグ自身につくもので、
form内のinputやbuttonでは発生しません💡
consoleでエベントの種類を
確認してみましょう✅ 👀

JavaScriptイベントハンドラ

--| submitイベント/
----| @submit

SubmitEventの中の
typeがsumit(@submit)とありますね🌟

コード

.preventについては後述します。


使用例

こちらの記事が分かりやすいかと思います🌟
Step3: ログイン機能の実装

firebaseAuthを使用して、
emailとpasswordを
submitしています🎈🧸

コード


.prevent修飾子

.preventとは

既定のアクションを通常どおりに行うべきではないことを伝えます。

https://developer.mozilla.org/ja/docs/Web/API/Event/preventDefault

JSのEvent.preventDefault()関数のこと
まずは簡単に@clickでやってみます🌟🧸

aタグのデフォルトの挙動
「クリックしたらページ遷移する」
ことを妨げています。
いくらクリックしても
localhost:3000に遷移しません。

コード


.preventがある場合

ではformで.preventを使った場合💡
.preventを入れることで
form本来のaction属性で
「送信時に画面遷移する」
ことを防いでいます。

action属性とは
送信するデータ先を指定するもの
送信時にリロード, 画面遷移される
データ送信先のことをURIと言います

actionでの送信先は指定していません
データを'どこか'に送信した場合

コード


.preventがない場合

.preventがないと
リロードされて入力した文字列が
送信はできるものの、
画面上からは消えてしまいます。

コード



まとめ

  • @submitはformタグに使う
  • .preventをつけることで画面遷移させない

-Vueと共通
-,

© 2020 aLiz Nuxt