Nuxt.js とFirebase のRealtime Database に複数要素を保存する

はじめに

過去記事でNuxt.js と Firebase の Realtime Database にデータを保存する処理を記載した。

>Nuxt.js でFirebase にデータを保存する

ただ複数要素を保存する方法がわからなかった。

厳密にいえば、変動するデータ数の保存の仕方が不明だったので、解決してみた。

解決方法

TODOリストのようなものを作成し、配列とし格納したうえで保存をする。

コード

// template（抜粋）

<div class="form">
  <input type="text" v-model="newDo">
  <button @click="add(newDo)">追加</button>
</div>
<div class="todo_list" v-for="(todo, index) in todos" :key="index">
  {{ todo }}
</div>
<button @click="saveContent(todos)">保存</button>

// script（抜粋）

<script>
import firebase from "~/plugins/firebase.js";
export default {
  data() {
    return {
      newDo: '今日やったことは？',
      todos: [],
    };
  },
  methods: {
    add: function(newDo) {
      const todoItem = this.newDo;
      this.todos.push(todoItem);
      this.newDo = "";
    },
    saveContent: function(todos) {
    firebase
      .database()
      // .ref(this.user.uid)
      .ref()
      .push({todos});
  }
  }
}
</script>

追加ボタンを押した時に、input に入力したデータを.push で todoItem の配列に格納する。

格納された配列をv-for="(todo, index) in todos" で表示する。

最後にその配列を保存する。

配列を使うことで解決した。