[Vuejs]-Firebase function isn't realtime

by

0👍

✅

After some work, this came down to updating the way the callback was managing the values returned from Firebase.

new Vue({
    el: '#app',
    data: {
    todaysEvents: [],
  },
  firebase: {
        test: db.ref('calendar')
    },
  methods : {
    getTodaysEvents () {
      const events = db.ref('calendar')
      const query = events.orderByChild('day').equalTo(23)

      query.on('value', snap => {
        let events = snap.val()
        let newEvents = []
        for (let key of Object.keys(events))
          newEvents.push(Object.assign({}, events[key], {key}))
        this.todaysEvents = newEvents
      })
    }
  },
  mounted(){
    setTimeout(() =>
      this.getTodaysEvents(), 500)
  }
})
👤Bert

0👍

Attaching a value observer to a list of data will return the entire list of data as a single snapshot which you can then loop over to access individual children. See docs

You can also do it like this:

new Vue({
    el: '#app',
    data: {
    todaysEvents: [],
  },
  firebase: {
        test: db.ref('calendar')
    },
  methods : {
    getTodaysEvents () {
      const events = db.ref('calendar')
      const query = events.orderByChild('day').equalTo(23);

      query.on('value', snap =>{
          snap.forEach(childSnap => {
              var childVal = childSnap.val();
              this.todaysEvents.push(childVal);
          });
      });


    }
  },
  mounted(){
    setTimeout(() =>
      this.getTodaysEvents(), 500)
  }
})

Here is the fiddle

👤Vamsi Krishna

Leave a comment