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

前置き

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

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

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

【Nuxt.js】Nuxt文法編：@click

@submit

イベントの種類

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

JavaScriptイベントハンドラ

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

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

コード

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

<template>
  <div class="page">
    <form @submit.prevent="submit">
      <input
        type="text"
        placeholder="テキストを入力"
      >
      <button type="submit">送信</button>
    </form>
  </div>
</template>

<script>
export default {
  methods: {
    submit () {
      console.log(event)
    },
  },
}
</script>

<input

type="text"

placeholder="テキストを入力"

</form>

</div>

</template>

export default {

methods: {

submit () {

console.log(event)

}

</script>

使用例

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

【Nuxt.js】firebase基礎編(Auth版)：メールアドレスログインをできるようにしよう

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

コード

<template>
 <div class="page">
   <form
     class="form"
     @submit.prevent="login"
   >
     <label class="label">
       <span class="label">
         email
       </span>
       <input
         class="input"
         type="text"
         v-model="email"
       >
     </label>
     <label class="label">
       <span class="label">
         password
       </span>
       <input
         class="input"
         type="password"
         v-model="password"
       >
     </label>
     <button
       class="button"
       type="submit"
     >
       Login
     </button>
   </form>
 </div>
</template>

<script>
import firebase from '~/plugins/firebase'

export default {
 data() {
   return {
     email: '',
     password: ''
   }
 },
 methods : {
   login() {
     firebase.auth().signInWithEmailAndPassword(this.email, this.password)
     .then(user => {
       console.log('成功！')// eslint-disable-line
     }).catch((error) => {
       alert(error)
     });
   },
 }
}
</script>

<form

class="form"

@submit.prevent="login"

</span>

<input

class="input"

type="text"

v-model="email"

</label>

password

</span>

<input

class="input"

type="password"

v-model="password"

</label>

<button

class="button"

type="submit"

</button>

</form>

</div>

</template>

import firebase from '~/plugins/firebase'

export default {

data() {

return {

email: '',

password: ''

}

methods : {

firebase.auth().signInWithEmailAndPassword(this.email, this.password)

.then(user => {

console.log('成功！')// eslint-disable-line

}).catch((error) => {

alert(error)

});

}

</script>

.prevent修飾子

.preventとは

既定のアクションを通常どおりに行うべきではないことを伝えます。
https://developer.mozilla.org/ja/docs/Web/API/Event/preventDefault

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

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

コード

<template>
  <a href="/" @click.prevent>link</a>
</template>

</template>

.preventがある場合

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

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

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

コード

<template>
  <div class="page">
    <form @submit.prevent="submit">
      <input
        type="text"
        placeholder="テキストを入力"
      >
    </form>
  </div>
</template>

<script>
export default {
  methods: {
    submit () {
      console.log('submit!')
    },
  },
}
</script>

<input

type="text"

placeholder="テキストを入力"

</form>

</div>

</template>

export default {

methods: {

submit () {

console.log('submit!')

}

</script>

.preventがない場合

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

コード

<template>
  <div class="page">
    <form @submit="submit">
      <input
        type="text"
        placeholder="テキストを入力"
      >
    </form>
  </div>
</template>

<script>
export default {
  methods: {
    submit () {
      console.log('submit!')
    },
  },
}
</script>

<input

type="text"

placeholder="テキストを入力"

</form>

</div>

</template>

export default {

methods: {

submit () {

console.log('submit!')

}

</script>

まとめ

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