У меня есть две коллекции Firebase: категории и продукты.
Моя схема данных выглядит так:
categories: {
categoryId1: {
name: Category1
},
categoryId2: {
name: Category2
},
categoryId3: {
name: Category3
}
}
products: {
productId1: {
name: Product 1,
category: categoryId1,
price: 5
},
productId2: {
name: Product 2,
category: categoryId2,
price: 5
},
productId3: {
name: Product 3,
category: categoryId3,
price: 5
}
}
Я могу получить обе коллекции клиенту и отображать списки с помощью директивы v-for. У меня есть список вкладок, отображаемых со всеми категориями в моей коллекции категорий.
<div>
<b-tabs content-class="mt-3">
<b-tab v-for="category in categories" :title="category.name" :key="category.id"></b-tab>
</b-tabs>
</div>
Далее я хотел бы отобразить список продуктов на каждой вкладке с условием. Где значение категории товара равно значению вкладки category.id
Что-то вроде этого:
<div>
<b-tabs content-class="mt-3">
<b-tab v-for="category in categories" :title="category.name" :key="category.id">
<li v-for="product in products" v-if="product.category === category.id" :key="product.id">
{{ product.name }}
</li>
</b-tab>
</b-tabs>
</div>
Может кто-нибудь помочь исправить это состояние, пожалуйста.