Vue3如何从JSON对象提取子分类数组并展示分类名和对应商品列表

你拿到的result.data.data.master是标准的对象结构，Vue3的v-for原生支持遍历对象，同时获取属性名和属性值，刚好匹配你的需求：

方法1：直接在模板中遍历（推荐） #

JS 逻辑（组合式API示例） #

import { ref } from 'vue'
// 定义响应式变量存接口返回的分类数据
const productMaster = ref({})

// 接口请求成功后赋值
productMaster.value = result.data.data.master

模板代码 #

<template>
  <div class="product-wrapper">
    <!-- v-for遍历对象时，第一个参数是属性值（对应分类下的商品数组），第二个是属性名（对应分类名称） -->
    <div v-for="(products, categoryName) in productMaster" :key="categoryName" class="category-block">
      <!-- 直接输出分类名：chicken / wheat beer 等 -->
      <h2 class="category-title">{{ categoryName }}</h2>
      <ul class="product-list">
        <li v-for="product in products" :key="product.productId" class="product-item">
          <p>商品名称：{{ product.productName }}</p>
          <p>售价：¥{{ product.productPrice }}</p>
          <p>评分：{{ product.productRating }}</p>
          <!-- 其他商品字段按需补充 -->
        </li>
      </ul>
    </div>
  </div>
</template>

方法2：提前在JS层处理数据 #

如果你需要对分类做额外排序、过滤等操作，可以先把对象转成带分类名的数组再渲染：

JS 处理逻辑 #

import { ref, computed } from 'vue'
const productMaster = ref({})

// 接口请求成功后赋值
productMaster.value = result.data.data.master

// 处理成带分类名的数组，方便后续扩展操作
const categoryList = computed(() => {
  return Object.entries(productMaster.value).map(([categoryName, products]) => ({
    categoryName,
    products
  }))
})

模板代码 #

<template>
  <div class="product-wrapper">
    <div v-for="item in categoryList" :key="item.categoryName" class="category-block">
      <h2 class="category-title">{{ item.categoryName }}</h2>
      <ul class="product-list">
        <li v-for="product in item.products" :key="product.productId" class="product-item">
          <!-- 商品信息渲染 -->
        </li>
      </ul>
    </div>
  </div>
</template>

补充说明：你也可以直接取商品数组中第一个元素的categoryName字段作为分类名，但直接遍历对象取键的方式更高效，也能避免商品字段和分类名不一致的问题。

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