nuxtでfirestoreにform送信

この記事でやること

nuxtでform送信を行う

nuxtでform送信行う際の流れ

• v-modelからdataに値を送信
• submitの@clickでmethodsを発火
• methodsでfirestoreへの送信を記述

v-modelからdataに値を送信

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

export default {
  data: function () {
    return {
      room_title: '',
      story_name: ''
    }
  },
}
</script>

dataを準備。ここに格納していく

submitの@clickでmethodsを発火

formで囲ってv-modelをまとめて送信する

      <form>
        <v-text-field
          v-model="room_title"
        ></v-text-field>
        <v-text-field
          v-model="story_name"
        ></v-text-field>
        <v-btn color="primary" @click="makeroom">
          部屋作成
        </v-btn>
      </form>

methodsでfirestoreへの送信を記述

  methods: {
    makeroom: function () {
      var db = firebase.firestore()
      db.collection('room').doc().set({
        room_title: this.room_title,
        user_id: this.$store.state.uid,
        story_name: this.story_name
      })
      .then(function (docRef) {
        console.log('Document written with ID: ', docRef.id)
      })
      .catch(function (error) {
        console.error('Error adding document: ', error)
      })
    }
  }

thisでdataの値を引っ張ってきてfirestoreに送る