计算属性中的Firebase数据库在v-for中不起作用/渲染

Question

我有一个计算属性，该属性从Firebase数据库获取数据并返回一个数组。我想在我的应用中渲染为v-for。问题是每次我重新加载或在新标签页中打开它时，它都不会呈现任何内容。我在控制台上记录了应该返回的数组，但返回了[]。另一件事很奇怪，就是每次我添加代码并保存它时，比如说我添加了console.log()，那时候它就是渲染项目的时间。

我已经尝试过将其移至methods属性中，但仍然无法正常工作。

这是我的vue文件中的计算属性。我还安装了lodash，即this.$_

computed: {
  tasks () {
    let tmpList = []
    this.$firebase.getTasks(snap => {
      this.$_.each(snap, s => {
        this.$firebase.database(`/postedParcels/${s.key}`, parcels => {
          parcels.forEach(parcel => {
            let tmp = parcel.val()
            tmp.key = parcel.key
            tmpList.push(tmp)
          })
        })
      })
    })
    return tmpList
  }
}

在我的firebase.js插件中有部分代码。

getTasks (fn) {
  fireApp.database().ref('/postedParcels').on('value', snap => {
    let tmp = []
    snap.forEach(s => {
      tmp.push({
        key: s.key,
        data: s.val()
      })
    })
    fn(tmp)
  })
},
database (ref, fn) {
  fireApp.database().ref(ref).on('value', snap => fn(snap))
}

我要渲染的代码。我正在使用Vuetify。

<v-card 
  v-for="task in tasks"
  :key="task.id"
  class="mb-2"
  @click="viewFullItemDetails(task)"
>
  <v-card-text>
    <fb-data-table :firebase-data="task"></fb-data-table>
  </v-card-text>
</v-card>