Vue.jsでのFirebaseのデータ取得がうまくいかない

Question

前提・実現したいこと

Vue.jsとFirebaseを利用した開発の練習をしています。

Firebaseからデータ取得し、data内のthis.skillsに入れることが目的です。

下のコードに書いてあるように、querySnapshot内と外で、skillsが取得できるかどうかになぜ違いが出てくるのでしょうか。

どうぞよろしくお願い致します。

該当のソースコード

export default {
  data(){ return {
      skills: []
    }
  },
  created() {
    let skills = []
    firebase.firestore().collection("skills").get().then(function(querySnapshot) {
      querySnapshot.forEach(function(doc) {
        skills.push(doc.data())
      })
      console.log("querySnapshot内で確認：" + skills) // 取得できる
    })
    .catch(function(error) {
      console.log("Error getting skills: ", error)
    })
    this.skills = skills
    console.log("createdの最後でskillsを確認：" + skills) // 取得できない
    console.log("createdの最後でthis.skillsを確認：" + this.skills) // 取得できない
  },
}

Answer 1

非同期処理だからです。

firebase.firestore().collection("skills").get().then｛｝

thenの中は結果が返ってきてから実行されます。
スコープの外は、リクエスト送出してすぐに実行されます。
なので空なのです。

console.logに連番をつけてどの順番に表示されるかを見たら解かると思います。

vuexfireというラッパーを使うのがおすすめです。
データを取ってきてstoreにセットしてくれます。
https://vuefire.vuejs.org/api/vuexfire.html#vuexfiremutations

Comments

[gymusel]

ありがとうございます！！参考になりました！！

Answer 2

Firebaseのバグ