如何在方法（Vuefire）中访问firebase prop的值？答案

【问题标题】：How to access firebase prop's values inside a method (Vuefire)?如何在方法（Vuefire）中访问firebase prop的值？
【发布时间】：2023-03-11 12:15:01
【问题描述】：

在我的组件中，我正在做：

firebase() {
  const userId = firebase.auth().currentUser.uid
  return {
    race: userRef.child(userId).child('races').child(this.raceKey)
  }
},
mounted () {
  console.log(this.$firebaseRefs.race.name)
}

我可以在我的组件模板中访问竞赛属性的值，但我不知道如何在创建的钩子或方法中访问它们。该值始终未定义。我该怎么做？

比赛的结构是：

race: {
 name: "the name",
 .....
}

【问题讨论】：

标签： javascript firebase vue.js firebase-realtime-database vuefire

【解决方案1】：

这是因为对 Firebase 实时数据库的查询是异步的，因此无法保证您在像 mounted 这样的生命周期挂钩中获得查询结果。换句话说，您的 race 对象的 Firebase 绑定不会在实例挂载之前完成。

有关更多详细信息以及readyCallback 的可能解决方法，请参阅以下帖子：

https://github.com/vuejs/vuefire/issues/70 和 https://github.com/vuejs/vuefire/issues/69

【讨论】：

【解决方案2】：

使用 readyCallBack 函数解决了这个问题。在实际加载 Firebase 参考之前触发了该问题。感谢 Renaud Tarnec 的帮助。

firebase() {
  return {
    race: {
      source: userRef.child(firebase.auth().currentUser.uid).child('races').child("-LMgzo_50TzlfJwCblDS"),
      asObject: true,
      cancelCallback: function () {},
      readyCallback: function() {
        console.log("Firebase race was loaded")
        this.renderMap()
      }
    }
  }
}

【讨论】：