javascript - Firebase 功能不是实时的

Question

我在 VueJS 方法中设置了 firebase 查询

data: {this.todaysEvents}, 
methods : {
    getTodaysEvents (day) {
      this.todaysEvents = []
      const events = db.ref('calendar')
      const query = events.orderByChild('day').equalTo(day)
      console.log(query)

      query.on('value', snap => {
        this.todaysEvents.push(snap.val())
        console.log(this.todaysEvents)
      })
    }

然后通过v-for循环使用它:

<ul class="events-header-list">
    <li :key="index" v-for="(event, index) in todaysEvents[0]" class="chip">{{event}}</li>
</ul>

当我更新事件时出现问题。数据不实时同步。需要做什么才能使其实时？

编辑:这是todaysEvents返回的数据:

[
  {
    "Same Event": {
      "calendar": "Sports",
      "color": "orange",
      "date": "2017-05-22",
      "day": 23,
      "desc": "test description",
      "name": "test"
    },
    "some key": {
      "day": 23,
      "month": 6,
      "name": "cooler event"
    }
  }
]

Answer 1

经过一些工作，这归结为更新回调管理从 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)
  }
})