如何使用来自两个独立 Firebase 集合的数据执行嵌套 v-for

Question

我有两个 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>

有人可以帮助解决这个问题吗？

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

如何使用来自两个独立 Firebase 集合的数据执行嵌套 v-for

How to do a nested v-for with data from two seperate Firebase collections

javascript

firebase-realtime-database

vuejs2

v-for