Firebase 功能不是实时的答案

【问题标题】：Firebase function isn't realtimeFirebase 功能不是实时的
【发布时间】：2017-06-23 19:35:32
【问题描述】：

我在 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"
    }
  }
]

【问题讨论】：

很遗憾我还没有使用 vue.js 的经验，但它似乎没有检测到您更新了数据。此页面似乎与此相关：vuejs.org/v2/guide/reactivity.html
snap.val()的结果是数组吗？
@BertEvans Firebase 不幸返回对象。
什么是todaysEvents[0]？
@BertEvans 因此，由于 firebase 返回一个对象，然后我将该对象的对象推送到数组 todaysEvents 然后我必须指定 [0] 才能访问返回的 firebase 对象。我知道应该有一种方法可以使用 forEach 将其转换为数组，但我仍在研究 JS。

标签： javascript firebase firebase-realtime-database vue.js vuejs2

【解决方案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)
  }
})

【讨论】：

你甚至可以使用forEach()来做到这一点

【解决方案2】：

将value 观察者附加到数据列表将返回整个数据列表作为单个快照，然后您可以循环访问单个子节点。见docs

你也可以这样做：

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)
  }
})

这里是fiddle

【讨论】：