why

手軽で無料な Firebase を使ってなんかの管理システムを動くように作って

それで私が作れる機能を全て盛り込んだ入力システムを見せられる形で作りたい

参考

Nuxt.js Vue.js 超入門

Chapter 6, 396ページ

what to do

kei-s-lifehack.hatenablog.com

前回の記事で Firebase RDB からの Nuxt Axios でのデータの取得はできた

今回はデータの追加をやる

axios.put で firebase の projectName.firebaseio.com/tableName

に送ることで登録できるらしい。まずはその検証をする

Firebase のデータの一覧表示、追加をやってみる

v-for で Firebase のデータをリスト表示する

    getData() {
      axios.get(url + '.json')
        .then( (res) => {
          this.json_data = res.data
        }).catch((error) => {
          this.message = 'ERR'
          this.json_data = {}
      })
    },

まずはこの getData() で this.json_data に Firebase のデータを入れる

  created() {
    this.getData()
  },

そして created で最初に計算がされる時呼び出す

    <li v-for="(data, key) in json_data" :key="key">
       {{key}} {{data}} 
    </li>

template で v-for を使い、展開する元のさっき入れた json_data

から key を指定した上で展開する

f:id:kei_s_lifehack:20210829010917p:plain

この構造の場合はデータの id? となる ai@sato や miku@hatune が

data_json の key プロパティとして自動で入る。

そして data にはさっき axios で response.data から取ってきた中身が入ってる

f:id:kei_s_lifehack:20210829014243p:plain

表示はこうなる

データを追加する機能を試す

methods: / addData()

    addData() {
      const add_url = url + this.email + '.json'
      const data = {
        'name': this.name,
        'tel': this.tel,
      }
      axios.put(add_url, data)
        .then( ( res ) => {
          this.email = ''

          this.name = ''
          this.tel = ''

          this.getData()
        })
    },

データを追加するには firebase のテーブル名の url と、

追加する id となるもの、今回は email の変数、

そして最後の .json の文字列が必要になる

それらを組み合わせた url + this.email + '.json' を

axios.put の第一引数として取り

第二引数には v-model で input に入れた値が入っている name と tel が

object として data にまとめられて、使われる。

送信後、.then で送るものの id 相当の email, 中身の name, tel, が初期化される

そして getData() で更新後の値をとってくることになる。

template

    <input v-model="email" />
    <br/>
    <input v-model="name" />
    <br/>
    <input v-model="tel" />
    <br/>
    <button @click="addData"> ADD DATA </button>
    <br/>