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

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

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

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

我可以向客户端检索这两个集合，并且可以使用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

大概是这样的：

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

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

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

{{product.name}

---

有人能帮你解决这个问题吗。

你需要循环中的循环，如下所示：

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

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

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

{{product.name}

太棒了，太棒了！谢谢你的帮助，我做了一个jsfiddle来分享。