Currently, I am working on organizing my results by category. I believe there is room for improvement in the way it's being done:
<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>
..
I came across this article that explains using a computed property to achieve what I want, but I'm having trouble making it work (I think because it requires an argument):
computed: {
filter(category) {
return this.stashes.items.filter(a => a.extended.subcategories[0] === category);
}
}
and then something like this:
<div v-for="item in filter('gloves')" :key="item.id">
..
</div>
However, I found that passing an argument in the loop as shown above isn't allowed, and I'm stuck at this point.
Does anyone have any suggestions on how to approach this issue?
This is how the "stashes" data structure looks:
stashes: [
{
id: 1,
items: [{
name: 'lorem',
extended: {
subcategories: ["gloves"]
}
}]
},
{
id: 2,
items: [{
name: 'ipsum',
extended: {
subcategories: ["boots"]
}
}]
},
]