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

🎈 この記事はWP専用です
https://wp.me/pc9NHC-p9

前置き

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

基本的な記法や
イベントの種類、
イベント修飾子などは
こちらで既に解説済みです🎀👩‍🏫
https://wp.me/pc9NHC-ht

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

@submit

イベントの種類

MDN
submitイベントは

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

JavaScriptイベントハンドラ
--| submitイベント/
----| @submit

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

コード

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

index.vue

<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>

使用例

こちらの記事が分かりやすいかと思います🌟
Step3: ログイン機能の実装
https://wp.me/pc9NHC-ik

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

コード

index.vue

<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>

.prevent修飾子

🎈 続きはWPでご覧ください👀
https://wp.me/pc9NHC-p9