firebase - 出现 vuefire+firebase 绑定集合错误

Question

我正在使用 VueFire 和 Firebase 构建网络应用程序。

我的实时数据库中有两个集合：

cities:{
    0: {
        name: Berlin,
        countryId: 0
    },
    1: {
        name: Paris,
        countryId: 1
    },
    ...
},
countries:{
    0: {
        name: Germany,
    },
    1: {
        name: France,
    },
    ...
},

在 Vue 组件中，我试图获取（城市名称 + 国家名称）列表：

<div v-for="(city, indx) in cities" :key="indx">
    <div>{{city.name}}, {{countries[city.countryId].name}}</div>
</div>

export default {
    firebase: {
      cities: db.ref('cities'),
      countries: db.ref('countries'),
    }
}

有这个错误：

[Vue warn]: Error in render: "TypeError: Cannot read property 
'countryId' of undefined"

如果只有 {{city.name}} - 好的。

怎么了？如何以正确的方式绑定这 2 个集合以获得我想要的东西？

Answer 1

由于 firebase 需要一些时间来获取数据，因此首先加载 DOM。

你可以尝试这样做。

firebase: {
  citiesFromdb: db.ref('cities'),
  countriesFromdb: db.ref('countries'),
}
computed: {
    cities() {
        return this.citiesFromdb;
    },
    countries(){
      return this.countriesFromdb;
    }
}