所以现在我这样做是为了按类别组织我的结果,但如果觉得这样可能会更好:
<div><h2>Gloves</h2></div>
<div v-for="stash in stashes" :key="stash.id">
<div v-for="item in stash.items" :key="item.id">
<div v-if="item.extended.subcategories[0] === 'gloves'">
{{ item.extended.baseType }}
</div>
</div>
</div>
<div><h2>Boots</h2></div>
<div v-for="stash in stashes" :key="stash.id2">
<div v-for="item in stash.items" :key="item.id2">
<div v-if="item.extended.subcategories[0] === 'belt'">
{{ item.extended.baseType }}
</div>
</div>
</div>
<div><h2>Helmets</h2></div>
..
<div><h2>Weapons</h2></div>
..
如果找到this文章用计算属性来做这件事,我觉得这应该是这样,但无法让它工作(也是因为我需要一个参数才能让它以我认为的方式工作?):
computed: {
filter(category) {
return this.stashes.items.filter(a => a.extended.subcategories[0] === category);
}
}
然后是这样的:
<div v-for="item in filter('gloves')" :key="item.id">
..
</div>
但是,是的,它说我不能像这样在 for 循环中传递参数,所以这就是我现在结束的地方。
有人知道如何做到这一点吗?
藏品看起来像这样:
stashes: [
{
id: 1
items: [{
name: 'lorem',
extended: {
subcategories: ["gloves"]
}
}]
},
{
id: 2
items: [{
name: 'ipsum',
extended: {
subcategories: ["boots"]
}
}]
},
]
最佳答案
虽然在模板中使用方法可能会解决此问题,但这不是一个好的模式,因为它会导致每次模板因任何原因重新呈现时都会运行该方法。添加另一个级别的v-for
:
<div v-for="category in categories" :key="category">
<div><h2>{{ category }}</h2></div>
<div v-for="stash in stashes" :key="stash.id">
<div v-for="item in stash.items" :key="item.id">
<div v-if="item.extended.subcategories[0] === category">
{{ item.extended.baseType }}
</div>
</div>
</div>
</div>
并创建一系列类别,例如:
data() {
return {
categories: ['gloves','belt']
}
}
关于javascript - VueJs - v-for 结果的条件语句/过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61382182/