Question

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

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

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}}-好的。

怎么了？我如何才能正确绑定这两个集合以得到我想要的东西？

Answer 1

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

您可以尝试这样做。

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

出现vuefire + firebase绑定集合错误

1 个答案: