Как сделать вложенный v-for с данными из двух отдельных коллекций Firebase - PullRequest
Новая
       12

Как сделать вложенный v-for с данными из двух отдельных коллекций Firebase

0 голосов
/ 26 февраля 2019

У меня есть две коллекции 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-для директивы.У меня есть список вкладок, отображаемых со всеми категориями в моей коллекции категорий. 

<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>

Может ли кто-нибудь помочь в правильном выполнении этого условия, пожалуйста.

1 Ответ

0 голосов
/ 26 февраля 2019

Вам нужен цикл внутри цикла, например: 

<div>
  <b-tabs content-class="mt-3">
    <b-tab v-for="category in categories" :title="category.name" :key="category.id">
    <template v-for="product in products" :key="product.name">
      <li v-if="product.category === category.id">
        {{ product.name }}
      </li>
    </template>
  </b-tab>
  </b-tabs>
</div>
...