Currently, I am working with two data sets: categories and products. My goal is to filter products based on the category they are associated with.
The challenge lies in filtering by category.name as the name must match product.category. While attempting to pass this on, I have tried utilizing category["name"] and {{category.name}} without success.
<b-tab v-for="category in categories" v-bind:title="category.name" :key="category.id">
<div v-for="product in filteredByCategory(category.name)" :key="product.id" class="slide">
<b-card
v-bind:title="product.name"
:img-src="product.imageUrl"
style="min-width: 15rem; max-width: 15rem;"
>
</b-card>
The current method I am using for filtering:
filteredByCategory(category){
return this.products.filter(product => product.category === category.name)
}
If anyone has a solution or suggestion, please assist me.