firebaseのrealtimedatabaseの値が何故か取得できない

Question

firebaseのrealtimedatabaseを下記のように保存しています。

これのcontentを配列で引っ張ってきたいんですがなぜかうまくいきません。。。
nuxtで下記のコードで書いているのですがcreatedで引っ張るところがわかっていません。

<template>
</template>

<script>
import firebase from '@/plugins/firebase'
import { mapState } from 'vuex'

export default {
  name: 'mypage',
  props: ['user'],
  data (context) {
    // コンポーネントをロードする前に毎回呼び出されます
    return { note_content: 'hello', notes:[]}
  },
  // DOMが作成されたときに値を代入する
  created: 
  // ここがうまく書けない。
  computed: {
   ...mapState({
     mypageUrl: (state) => `/user/${state.uid}`
   })
 },
  methods: {
    saveContent: function(value) {
      // 新しいテキストのためのキーを取得
      var newNoteKey = firebase.database().ref().child('notes').push().key;
      var today = Date.now();
      firebase
        .database()
        .ref('notes/' + this.user.uid　+ '/' + newNoteKey)
        .set({content:value,date:today});
    }
  }
/*以下省略*/
}
</script>

Comments

[shou6]

ご自身で書かれたコードも載せて頂いた方がいいかと思います。

[you88]

ご指摘ありがとうございます！追記しました！

Answer 1

これで取得出来ます。
firebaseから取得するメソッドを作って、created()で呼び出せば大丈夫です。

あと質問はそのままにしない方が良いかと思います。
過去の質問
同じ様な質問ですよね。

<template>
  <div>
    <h1>test page</h1>
    <div v-for="(data, key) in notes" :key="key">key：{{ key }} ⇒ value：{{ data }}</div>
  </div>
</template>

<script>
import { database } from "@/services/fireinit.js"
// import { mapState } from "vuex"

export default {
  props: ["user"],
  data() {
    return {
      note_content: "hello",
      notes: []
    }
  },
  created() {
    this.fetchData()
  },
  computed: {
    ...mapState({
      // mypageUrl: state => `/user/${state.uid}`
    })
  },
  methods: {
    saveContent(value) {
      // const newNoteKey = database
      //   .ref()
      //   .child("note-test")
      //   .push().key
      // const today = Date.now()
      // database.ref(`notes/${this.user.uid}/${newNoteKey}`).set({ content: value, date: today })
    },
    async fetchData() {
      await database.ref("note-test/abcdefgh").once("value", snapshop => {
        this.notes = snapshop.val() || []
      })
    }
  }
}
</script>

# fireinit.js

import * as firebase from "firebase/app"
import "firebase/database"
import "firebase/storage"

const config = {
  apiKey: <your key>,
  authDomain: <your key>,
  databaseURL: <your key>,
  projectId: <your key>,
  storageBucket: <your key>,
  messagingSenderId: <your key>
}

!firebase.apps.length ? firebase.initializeApp(config) : ""
export const database = firebase.database()
export const storage = firebase.storage()
export default firebase

# firebase

{
  "note-test" : {
    "abcdefgh" : {
      "100" : "あ",
      "101" : "い",
      "103" : "う"
    }
  }
}

Comments

[you88]

すみません、説明が下手でやりたいことと微妙に違います。。。

<div v-for="(data, key) in notes" :key="key">key：{{ key }} ⇒ value：{{ data }}</div>

で展開するのはできているのですがnotesのcontentのみを配列で引っ張ってこれず。。。あとjavascript内で展開したいのですがそれがどうしてもできず。。。

[shou6]

いえ、中身を展開したのは分かりやすくする為です。

あとはただのオブジェクトなので、contentを取得したいならばオブジェクト操作をしてあげるだけかと思うのですが・・
何がしたいのかが分かりません。

引用---------------------------------------------------------------------------------------------------
database.ref(`notes/${this.user.uid}/${newNoteKey}`).set({ content: value, date: today })
--------------------------------------------------------------------------------------------------------
ご自身でidとkeyを入れてデータベースに格納してる訳ですから、そのキーでオブジェクト取れますよね？

notesから引っ張ってきたのなら、
this.notes[this.user.uid][newNoteKey]
で
{
content:〇〇,
date:〇〇
}
が取得出来ます。

[you88]

提示してもらった方法で何故か引っ張れないのでなんでだろうという質問でした。。。