[英]Reading data with firebase and vue.js
I'm not very experienced, and I was wondering how I can extract data from firebase, updating the status element of vue.js. 我不是很有经验,我想知道如何从Firebase中提取数据,更新vue.js的status元素。 The problem is that I can not extract the fusion data dedicated to firebase "snapshot".
问题是我无法提取专用于Firebase“快照”的融合数据。 I leave you all the code and all the errors below.
我把下面的所有代码和所有错误留给您。
Vue.js code: 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>
Errors on Chrome: Chrome上的错误:
That's the expected behavior. 这是预期的行为。 Data is loaded from Firebase asynchronously.
从Firebase异步加载数据。 By the time your
[2]
log statement runs, the data hasn't been loaded yet and pinReport
is undefined. 在您的
[2]
日志语句运行时,数据尚未加载,并且pinReport
未定义。
This means that all code that needs the data must be inside the callback, like your [1]
log statement. 这意味着所有需要数据的代码都必须在回调内部,例如
[1]
log语句。 It also means that you can't return the value from the database from a function, since the return
runs before the data is loaded. 这也意味着您无法从函数
return
数据库中的值,因为return
是在加载数据之前运行的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.