列表中出现未知的额外项目(firebase)

Question

出于某种奇怪的原因，当我用来自Firebase的数据在Vue中呈现一个列表时，它在底部添加了一个实际上不在Firebase数据库中的额外项。

莫名其妙！

​

​

​

...

created () {
  this.$watch('projectId', (projectId) => {
    if (projectId) {
      this.$bindAsObject('deadlines', projectsRef.child(this.$route.params.id + '/deadlines'))
    }
  }, {
    immediate: true
  })
}

...

...

<div v-for="deadline in deadlines" :key="deadline['.key']" class="table__row grid-x">
  <div class="cell small-5">{{ deadline.description }}</div>
  <div class="cell small-6 text-right"><a href=''>{{ deadline.date }}</a></div>
  <div class="cell small-1 text-right"><a class="icon icon__trash--black" @click="removeDeadline(deadline)"></a></div>
</div>

...

​

Answer 1

看起来恢复到vuefire的数据绑定解决了这个问题。

​

firebase () {
  return {
    deadlines: projectsRef.child(this.$route.params.id + '/deadlines')
  }
}

​