VueJS/Quasar：如何将FirebaseDB数据从mounted传递到data用于DOM展示

API 探路者

2026-5-25

解决Vue中Firebase数据传递到data的问题

嘿，我来帮你搞定这个问题！你现在的核心问题是没搞懂异步回调的逻辑——Firebase的on('value')是异步操作，你在回调里return myjfc根本没法把值传到组件的data里，这个return只会在回调函数内部生效，完全影响不到Vue的响应式数据。

其实解决方法超简单，直接在回调里把获取到的值赋值给Vue实例的question1就行！刚好你已经用了箭头函数，它会保留Vue组件实例的this上下文，所以可以直接访问data里的属性。

修改后的完整代码如下：

data() {
  return {
    question1: "" // 先给个默认值，比如空字符串，避免DOM渲染时出现undefined
  }
},
mounted() {
  this.$firebase.database().ref('questions').on('value', data => {
    const obj = data.val()
    // 直接把Firebase获取到的值赋值给data里的question1
    this.question1 = obj.question1.a
  })
}

几个关键细节说明：

不需要额外定义myjfc变量，直接把obj.question1.a赋值给this.question1就行，Vue的响应式系统会自动更新DOM内容。
箭头函数的作用：如果这里用普通函数的话，this会指向回调函数本身而不是Vue组件实例，这时候就得先存一下const that = this，再用that.question1 = ...。箭头函数帮我们省了这一步，更简洁。
如果你只需要获取一次数据、不需要实时监听变化，可以把on('value')换成once('value')，这样只会请求一次数据，减少不必要的资源消耗：
```
mounted() {
  this.$firebase.database().ref('questions').once('value', data => {
    const obj = data.val()
    this.question1 = obj.question1.a
  })
}
```