Vue JS中如何按对象属性将单个JSON数组拆分为多个数组？

针对你需要按group属性动态拆分数组的需求，最适合用计算属性来实现——它能利用Vue的响应式特性，在源数据变化时自动更新分组结果。以下是具体实现方案：

核心实现代码 #

1. 组件数据与计算属性 #

export default {
  data() {
    return {
      sourceData: {
        fields: [
          { group: "group1", label: "label1", value: "value1" },
          { group: "group1", label: "label2", value: "value2" },
          { group: "group2", label: "label3", value: "value3" },
          { group: "group2", label: "label4", value: "value4" }
        ]
      }
    };
  },
  computed: {
    groupedFields() {
      // 用reduce一步完成分组与键名转换
      return this.sourceData.fields.reduce((result, field) => {
        // 生成目标键名：group名称 + Fields
        const targetKey = `${field.group}Fields`;
        // 若该键不存在则初始化空数组，再推入当前字段
        result[targetKey] = result[targetKey] || [];
        result[targetKey].push(field);
        return result;
      }, {});
    }
  }
};

2. 模板中使用分组结果 #

你可以直接访问groupedFields中的属性（如group1Fields），或通过遍历展示所有分组：

<template>
  <div class="field-groups">
    <!-- 遍历所有分组 -->
    <section v-for="(fields, groupKey) in groupedFields" :key="groupKey">
      <h2>{{ groupKey }}</h2>
      <div class="field-list">
        <div v-for="field in fields" :key="field.label" class="field-item">
          <span class="label">{{ field.label }}:</span>
          <span class="value">{{ field.value }}</span>
        </div>
      </div>
    </section>
  </div>
</template>

方案说明 #

• 计算属性的优势：依赖sourceData自动响应，只要源数组发生变化，分组结果会实时更新，无需手动调用方法。
• 动态适配未知group值：不管group的取值是什么，代码都会自动生成对应的xxxFields数组，完全不需要提前预设分组名称。
• 简化写法：使用Array.reduce替代forEach+额外对象转换，用更少的代码完成分组逻辑，可读性更强。

如果只是需要一次性处理数据（比如初始化时拆分），也可以把逻辑写成方法，但计算属性更贴合Vue的响应式设计，推荐优先使用。

内容的提问来源于stack exchange，提问作者M.Bush