javascript - 如何使用来自两个独立 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>