我有一个奇怪的 HTML 设置,我需要循环遍历。我从 Firebase 获取两部分数据。有一个categories
和一个businesses
数据集,结构如下:
Businesses
-UniqueFirebaseID
cat: "food"
Categories
-IniqueFirebaseID
name: "food"
然后我想像这样循环访问我的数据(请原谅非语义标记):
<ul>
<li v-for="cat in categories">
<ul>
<li v-for="business in filteredByCat">{{business.name}}</li>
</ul>
</li>
</ul>
我正在尝试将计算属性放在一起进行过滤。下面的内容代表了我正在尝试做的事情,但不确定如何去做。有什么建议吗?
computed: {
filteredByCat () {
return this.businesses.filter((element) => {
return element.cat.match(cat.name)
})
}
}
最佳答案
使用方法代替。
<ul>
<li v-for="cat in categories">
<ul>
<li v-for="business in filteredByCat(cat)">{{business.name}}</li>
</ul>
</li>
</ul>
methods: {
filteredByCat (cat) {
return this.businesses.filter((element) => {
return element.cat.match(cat.name)
})
}
}
或者,您可以使用计算来构建您想要迭代的数据结构。
computed:{
businessesByCategory(){
return this.categories.reduce((acc, category) => {
acc[category] = this.businesses.filter(b => b.category == category)
return acc
}, {})
}
}
你的新模板将是
<ul>
<li v-for="(value, key) in businessesByCategory"> {{key}}
<ul>
<li v-for="business in value">{{business.name}}</li>
</ul>
</li>
</ul>
Example .
关于javascript - Vue2 使用计算属性来过滤嵌套 v-for 的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44190013/