Vue.jsとFirebase firestoreを使って提出フォームの実装

前書き

以前、Axiosを使って、Firebase firestoreとのデータのやり取りをまとめました。
パッケージのfirebaseで簡単に実装できたのでまとめます。

axiosの方が難しいが、firebaseを活用しない場合に応用が効く為、
やっていて損はないと思います。

melheaven.hatenadiary.jp

使用パッケージ

• firebase

実装

./plugins/auth.js

参考にしました。
medium.com

firebase.firestore()を使うだけで簡単に実装できます。
SQL文を書く必要はありませんが、どこまで柔軟性があるのかはそこまで触っていないので不明です。
collectionで指定した"room"は、firebase firestoreのコントロール画面にて指定します。

import firebase from 'firebase'

export function post (data) {
  const room = 'service'
  return firebase.firestore().collection(room).add({
      title: data['title'],
      github: data['github'],
      weburl: data['weburl'],
      tech: data['tech'],
      purpose: data['purpose'],
      description: data['desc'],
      imageurl: data['imageurl']
  }, function(error) {
    if (error) {
      console.log(error)
    } else {
      console.log("Data saved successfully!")
    }
  });
}

./components/Register.vue

登録フォームのvueファイルは以下のような感じ。
firebase関連の関数はplugins/auth.jsにまとめ、
vueファイルから関数をImportする事で、簡潔にコードを記述できます。

<template>
<v-form>
        <v-text-field require label="制作物のタイトル" v-model="formdata.title" />
        <v-text-field require label="GithubのURL" v-model="formdata.github" />
        <v-text-field label="制作物ののURL（あれば）" v-model="formdata.weburl" />
        <v-autocomplete v-model="formdata.tech" :items="['JavaScript', 'Python']"
                                chips label="使用した技術" full-width hide-details hide-no-data
                                hide-selected multiple single-line />
        <v-textarea require label="開発目的" v-model="formdata.purpose" />
        <v-textarea require label="工夫箇所" v-model="formdata.desc" />
        <v-btn @click="submit">Submit</v-btn>
    </v-form>
</template>

<script>
import { post } from '@/plugins/auth'

export default {
    data() {
        return {
            redirect: "/",
            formdata: {
                title: "", github: "", weburl: "",
                tech: [], purpose: "", desc: "", imageurl: "" }
        }
    },
    methods: {
        submit() {
            post(this.formdata).then(() => {
                this.$router.push(this.redirect);
            })
        }
    }
}
</script>

結果

フォーム画面

フォーム画面が完了しました。