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

У меня есть две коллекции 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>

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


person timmy    schedule 26.02.2019    source источник


Ответы (1)


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

<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>
person DedaDev    schedule 26.02.2019
comment
Здорово, что разбудили! Спасибо за вашу помощь. Я сделал jsfiddle, чтобы попробовать его на совместном доступе. jsfiddle.net/timmyl/a6pvLf5n/6 - person timmy; 26.02.2019