Vue.js + Firebase - 如何显示深层嵌套数据库
问题描述:
这是我的第一个问题,因为这个 让我发疯。 我在摆弄firebase和vue.js,尝试使用 来循环我的数据库(键值)构造。Vue.js + Firebase - 如何显示深层嵌套数据库
下面是我的出口JSON:
{
"city":{
"new york":{
"zipcode":{
"10039":{
"street":{
"W 152nd St":[
"263",
"250",
"21"
]
}
},
"02116":{
"street":{
"W 155nd St":[
"3",
"25",
"21"
]
}
}
}
},
"boston":{
"zipcode":{
"02116":{
"street":{
"Berkeley St":[
"161",
"65",
"13"
]
}
}
}
}
}
}
还有什么要我告诉你吗?我认为这个结构可以帮助我生成像[city [v]] [zipcode [v]] [street [v]] [number [v]]这样的四分割依赖下拉菜单。
预先感谢您的时间和帮助。
编辑:
<div v-for="location in test">
<div v-for="(address,city) in location">
<div v-for="(nextplz,plzLabel) in address">
<div v-for="(nextstreet,plz) in nextplz">
<div v-for="(streetInfo,streetLabel) in nextstreet">
<div v-for="(numbers,streetName) in streetInfo">
{{location['.key']}} : {{city}}<br/>
{{plzLabel}} : {{plz}}<br/>
{{streetLabel}} : {{streetName}}<br/>
{{numbers}}<hr/>
</div>
</div>
</div>
</div>
</div>
</div>
编辑-2:固定的凹痕和错别字JSON
答
我假设test
是位置阵列和位置对象看起来你张贴的JSON。通常你使用v-for迭代数组而不是对象(尽管你可以),以访问使用'。'的对象属性。符号,所以你可以试试这个:
<div v-for="location in test">
{{location.address.nextplz.nextstreet.streetInfo}}
{{location.address.plzLabel}}
</div>
如果你想去在所有城市中,你会做这样的事情:
<div v-for="location in test">
<div v-for="(key,val) in location.city">
<!-- display the zipcode object for each city -->
<pre>{{city[key].zipcode}}</pre>
</div>
</div>
+0
感谢这种方法 - 基本上你是对的。现在它在我身上:) 我会保持这个更新。 –
如果您发布的VUE这将真正帮助组件 – Tomer
好吧 - 我并不认为它是一个组件,而更像是一种恶意的方法来读取一些数据。我正在编辑该主题,因为我的帖子太长了。 –