Nuxt.js で Firebase の Realtime Database に格納したデータを 表示することができない。

Question

はじめに

Nuxt.js と Firebase の Realtime Database を使用し（練習用）ウェブアプリを作成しております。

アプリの仕様

TODOリストのように、複数のデータを Realtime Database に格納する。
Realtime Database に格納したデータを表示する。

ただこれだけのシンプルな仕様になります。

現在できていること

現状、複数データを Realtime Database に保存することができました。
またそのデータを取得することもできました。

が、表示することができません。

考え方を教えていただけますでしょうか。

なお表示はクリックとかイベントのたびに最新化されるということではなく、常に最新のデータを表示できればと考えております。

コード

nuxt.js

本ファイルで、

• ログアウト
• Firebase へのデータ送信(実現済み)
• Firebase からデータ取得(実現済み)
• Firebase のデータを表示

を実現したいと考えております。

<template>
  <div>
    <h1>GOOD BYE</h1>
    <span>{{ user.displayName }}</span>
    <button @click="logout">ログアウト</button>
    <div>
      <input type="text" v-model="newDo">
      <button @click="add(newDo)">追加</button>
    </div>
    <div v-if="todos.length > 0">
      <div v-for="(todo, index) in todos" :key="index">
        {{ todo }}
      </div>
      <button @click="saveContent(todos)">保存</button>
    </div>
    <div v-else>
      <p>データがありません。</p>
    </div>
    <!-- Firebaseのデータを呼び出し記述 をここに書きたい-->
    <div v-for="(hoge, key) in dataBases" :key="key">
      <p>{{ hoge }}</p>
     </div>
    <!-- Firebaseのデータを呼び出し記述 をここに書きたい-->
  </div>
</template>

<script>
import axios from 'axios'
import firebase from "~/plugins/firebase.js";

export default {
  props: ["user"],

  // 下記コードでFirebase のデータは取得済み
  created: function() {
    firebase.database().ref(this.user.uid + '/today').once("value")
    .then(result => {
      result.forEach(childResult => {
        if(childResult.val()) {
          let dataBases = childResult.val();
          console.log(dataBases)
        }
      });
    })
  },
  methods: {
    // ログアウトの処理
    logout: ()=> {
      firebase.auth().signOut();
    },
    // Firebaseに送る前のデータ作成
    add: function(newDo) {
      const todoItem = this.newDo;
      this.todos.push(todoItem);
      this.newDo = "今日やったことは？";
    },
    // Firebaseにデータを送る
    saveContent: function(todos) {
      firebase.database().ref(this.user.uid + '/today').push(todos);
      todos.splice(0)
    }
  },
  data() {
    return {
      newDo: '今日やったことは？',
      todos: [],
      dataBases: []
    };
  },

}
</script>

<style>
</style>

FirebaseのJSON

saite-name-rtdb
    ├ user-id
        ├ push() で作成される一意のキー
            ├ today
                ├ 0: "HELLO"
                └ 1: "GOODBYE"
        ├ -push() で作成される一意のキー
            ├ today
                ├ 0: "HELLO"
                └ 1: "GOODBYE"

console.log(dataBases)

この結果を見る限り、Firebase のデータを取得できていると考えております。

(2) ["HELLO", "GOODBYE"]
(2) ["HELLO", "GOODBYE"]

やってみたこと

• axios を使用して所得してみようと思いましたが、対象のJSONファイルを見つけられませんでした。
• Nuxt.js のドキュメントにあったfetch asyncData を見よう見まねでコードを記載しましたが、表示できませんでした。

どちらも理解が足りないために、表示できないのだと思います。

考え方も含めてご教授いただければ幸いです。

Answer 1

コードのすべて

    <template>
  <div>
    <h1>GOOD BYE</h1>
    <span>{{ user.displayName }}</span>
    <button @click="logout">ログアウト</button>
    <div>
      <input type="text" v-model="newDo">
      <button @click="add(newDo)">追加</button>
    </div>
    <div v-if="todos.length > 0">
      <div v-for="(todo, index) in todos" :key="index">
        {{ todo }}
      </div>
      <button @click="saveContent(todos)">保存</button>
    </div>
    <div v-else>
      <p>データがありません。</p>
    </div>
    <!-- Firebaseのデータを呼び出し記述 をここに書きたい-->
    <div v-for="(childData, key) in childDatas" :key="key">
      <p>{{ childData }}</p>
     </div>
    <!-- Firebaseのデータを呼び出し記述 をここに書きたい-->
  </div>
</template>

<script>
import axios from 'axios'
import firebase from "~/plugins/firebase.js";

export default {
  props: ["user"],
  data() {
    return {
      newDo: '今日やったことは？',
      todos: [],
      childDatas: [],
    };
  },
  // 下記コードでFirebase のデータは取得済み
  created: function() {
    firebase.database().ref(this.user.uid + '/today').once("value")
    .then(result => {
      result.forEach(childResult => {
        if(childResult.val()) {
          let childData = childResult.val();
          for(let i = 0; i < childData.length; i++) {
              this.childDatas.push(childData[i]);
              console.log(childData[i])
          }
        }
      });
    })
  },
  methods: {
    // ログアウトの処理
    logout: ()=> {
      firebase.auth().signOut();
    },
    // Firebaseに送る前のデータ作成
    add: function(newDo) {
      const todoItem = this.newDo;
      this.todos.push(todoItem);
      this.newDo = "今日やったことは？";
    },
    // Firebaseにデータを送る
    saveContent: function(todos) {
      firebase.database().ref(this.user.uid + '/today').push(todos);
      todos.splice(0)
    }
  },
}
</script>

<style>
</style>

個人的解釈

質問の時点では、JSON の取得まで完了していたが、それを配列に格納する記述がなかった。

今回、追加したコードは、

for(let i = 0; i < childData.length; i++) {
    this.childDatas.push(childData[i]);
    console.log(childData[i])
}

childData の値を一つ一つを配列childDatas に格納していく。
結果、格納したデータをv-for で表示することができた。