Vue中如何获取并展示指定categoryID分类下的商品列表

核心原因：当前模板遍历的products是全量商品数据集，未和当前访问的分类ID做匹配，因此会展示所有商品。以下两种方案可解决问题，优先选择第一种。

方案1：后端接口过滤（推荐，性能最优） #

该方案无需前端拉取全量商品，减少无效数据传输：

• 访问分类详情路由时，从路由参数中获取当前categoryID，传给后端接口
• 后端查询商品表时增加筛选条件，仅返回category._id等于传入categoryID的商品
• 前端将接口返回的、属于当前分类的商品列表赋值给组件内的products变量，现有模板的v-for遍历逻辑无需修改即可正常展示

Mongoose 查询示例参考：

// 接口层从路由参数获取分类ID
const currentCategoryId = req.params.categoryID
// 查询商品时增加分类匹配条件
const matchedProducts = await Product.find({
  "category._id": currentCategoryId
})
// 响应返回分类信息+匹配后的商品列表
res.send({
  success: true,
  category: categoryData,
  products: matchedProducts
})

方案2：前端本地过滤（适合商品数据量小的场景） #

如果暂时无法调整后端接口，可在前端拉取全量商品后，通过计算属性过滤出当前分类下的商品：

1. 调整组件内的数据定义，将全量商品和当前分类商品做区分
2. 新增计算属性，根据当前分类ID过滤全量商品，返回匹配的商品列表
3. 原有模板逻辑无需改动，计算属性会自动响应分类ID的变化，更新展示的商品列表

Vue 实例逻辑参考：

new Vue({
  el: '#app',
  data() {
    return {
      category: {}, // 存储当前分类信息
      allProducts: [] // 存储接口返回的全量商品
    }
  },
  computed: {
    // 当前分类下的商品列表
    products() {
      if (!this.category._id || !this.allProducts.length) return []
      return this.allProducts.filter(product => product.category._id === this.category._id)
    }
  },
  async mounted() {
    // 从路由参数获取当前分类ID
    const currentCategoryId = this.$route.params.categoryID
    // 请求当前分类信息
    const categoryRes = await fetch(`/api/category/${currentCategoryId}`).then(res => res.json())
    this.category = categoryRes.category
    // 请求全量商品数据
    const productRes = await fetch('/api/all-products').then(res => res.json())
    this.allProducts = productRes.data
  }
})

注意：你提供的分类接口返回中products字段为空数组，说明后端目前未做分类和关联商品的聚合查询，无论使用哪种方案，都要保证模板遍历的products数组是经过分类ID匹配后的结果，不能直接赋值全量商品数据。

内容的提问来源于stack exchange，提问作者xander