Javascript 使用firebase和vue.js读取数据

我不是很有经验，我想知道如何从firebase提取数据，更新vue.js的status元素。问题是我无法提取firebase“快照”专用的融合数据。 我把下面所有的代码和错误留给你

Vue.js代码：

<template>
  <div id="app">

      <div>
        <h1>ON/OFF led</h1>
        <h2>Status: {{ device.status() }}</h2>
      </div>


  </div>
</template>

<script>
import Vue from 'vue'

import { deviceStatusRef } from './firebase';

var pinReport;


export default {
  data () {
    return {
      name: '',
      device: {
        nome: 'led',
        status: function(){
              deviceStatusRef.on("value", function(snapshot) {
                pinReport = snapshot.val();
                console.log("[1] - pinReport value --> " + pinReport);
              });
              console.log("[2] - pinReport VALUE --> " + pinReport);
              return pinReport;
            }
      }
    }
  },

}
</script>

<style>

</style>

开/关led
状态：{{device.Status（）}}
从“Vue”导入Vue
从“/firebase”导入{deviceStatusRef}；
风险价值报告；
导出默认值{
数据（）{
返回{
名称：“”，
设备：{
诺姆：“发光二极管”，
状态：函数（）{
deviceStatusRef.on（“值”，函数（快照）{
pinReport=snapshot.val（）；
console.log（“[1]-pinReport值-->”+pinReport）；
});
console.log（“[2]-pinReport值-->”+pinReport）；
返回报告；
}
}
}
},
}

Chrome上的错误：

---

这是预期的行为。数据从Firebase异步加载。当您的

[2]

日志语句运行时，数据尚未加载，并且

pinReport

未定义

---

这意味着所有需要数据的代码都必须在回调中，就像您的

[1]

日志语句一样。这还意味着您不能从函数中从数据库返回值，因为

return

在加载数据之前运行。

好的，我如何解决这个问题？关于正确显示vue的状态数据，您有什么建议吗？jsI正在阅读。似乎在Vue中，您只需设置组件的属性，Vue就会重新启用它。看，我做了一些测试，但问题仍然存在。当我在回调中时，我无法回忆vue.js的道具。也许我找到了一种方法，看这个