Reading data with firebase and vue.js

Question

I'm not very experienced, and I was wondering how I can extract data from firebase, updating the status element of vue.js. The problem is that I can not extract the fusion data dedicated to firebase "snapshot". I leave you all the code and all the errors below.

Vue.js code:

<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:

score 1 · Accepted Answer · answered Dec 15 '18 at 18:37

1

That's the expected behavior. Data is loaded from Firebase asynchronously. By the time your [2] log statement runs, the data hasn't been loaded yet and pinReport is undefined.

This means that all code that needs the data must be inside the callback, like your [1] log statement. 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.

answered Dec 15 '18 at 18:37

Frank van Puffelen

565,676
79
828
807

ok, how can I solve this problem? Do you have any advice on correctly displaying the status data of vue.js – Salvatore Raccardi Dec 15 '18 at 18:40
I was reading up on that. It seems that in Vue you can just set a property of the component and Vue will rerender it. See https://frontendsociety.com/transitioning-from-react-to-vue-c9aa943bd0da#be71 – Frank van Puffelen Dec 15 '18 at 18:49
I did some tests but the problem persists – Salvatore Raccardi Dec 15 '18 at 19:02
when I'm inside the callback I can not recall the props of vue.js – Salvatore Raccardi Dec 15 '18 at 19:03
maybe I found a way, look this https://forum.vuejs.org/t/how-can-i-get-the-data-returned-by-callback-function/18433 – Salvatore Raccardi Dec 15 '18 at 19:05
My explanation is why your current code can't work. But what you shared has nothing to do with Vue yet. Since your problem now is with vue, update your question to include the minimum complete code that shows how you're *now* trying to update the view. – Frank van Puffelen Dec 15 '18 at 19:05
As you can see in the forum post you linked, their code just updates a property and it Vue uses that to rerender the component. – Frank van Puffelen Dec 15 '18 at 19:06
I have just updated the code, my goal and view the status of a LED in real time – Salvatore Raccardi Dec 15 '18 at 19:16

Reading data with firebase and vue.js

1 Answers1