Vue.js中预填充reportGroupData并分组API数据的问题

错误原因分析 #

扩展/剩余运算符报错通常是这两种情况：

• 操作目标不是数组或可迭代对象：比如你试图对undefined或普通对象使用...，比如还没初始化report_details就直接执行...report_details，或是误把对象当成数组扩展。
• 语法逻辑错误：在forEach/map中未正确找到对应分组项就直接拼接，导致变量未定义触发报错。

正确实现方式 #

推荐用Array.reduce()完成多层分组，逻辑更清晰且能避免forEach中的赋值漏洞。假设你的接口返回res.data是如下结构的数组：

[
  { program_name: '项目A', iteration_name: 'V1.0', report_template_name: '性能报告', ...其他字段 },
  { program_name: '项目A', iteration_name: 'V1.0', report_template_name: '性能报告', ...其他字段 },
  { program_name: '项目B', iteration_name: 'V2.0', report_template_name: '功能测试', ...其他字段 },
  ...
]

1. 初始化数据属性 #

在Vue的data中定义目标结构：

data() {
  return {
    reportGroupData: []
  }
}

2. 异步请求后的分组逻辑 #

async fetchReportData() {
  try {
    const res = await this.$http.get('/你的接口地址')
    // 用reduce实现三层分组
    this.reportGroupData = res.data.reduce((acc, item) => {
      // 第一层：匹配或创建program分组
      let program = acc.find(p => p.program_name === item.program_name)
      if (!program) {
        program = {
          program_name: item.program_name,
          iterations: []
        }
        acc.push(program)
      }

      // 第二层：匹配或创建iteration分组
      let iteration = program.iterations.find(i => i.iteration_name === item.iteration_name)
      if (!iteration) {
        iteration = {
          iteration_name: item.iteration_name,
          templates: []
        }
        program.iterations.push(iteration)
      }

      // 第三层：匹配或创建template分组
      let template = iteration.templates.find(t => t.report_template_name === item.report_template_name)
      if (!template) {
        template = {
          report_template_name: item.report_template_name,
          report_details: []
        }
        iteration.templates.push(template)
      }

      // 将当前数据项加入对应report_details
      template.report_details.push(item)
      return acc
    }, [])
  } catch (err) {
    console.error('数据请求失败:', err)
  }
}

若坚持使用forEach的正确写法 #

如果一定要用forEach，必须确保每一层分组项都被提前初始化，否则扩展运算符会因操作undefined报错：

async fetchReportData() {
  try {
    const res = await this.$http.get('/你的接口地址')
    this.reportGroupData = []
    res.data.forEach(item => {
      // 处理program层
      let program = this.reportGroupData.find(p => p.program_name === item.program_name)
      if (!program) {
        program = { program_name: item.program_name, iterations: [] }
        this.reportGroupData.push(program)
      }

      // 处理iteration层
      let iteration = program.iterations.find(i => i.iteration_name === item.iteration_name)
      if (!iteration) {
        iteration = { iteration_name: item.iteration_name, templates: [] }
        program.iterations.push(iteration)
      }

      // 处理template层（必须初始化，否则report_details会是undefined）
      let template = iteration.templates.find(t => t.report_template_name === item.report_template_name)
      if (!template) {
        template = {
          report_template_name: item.report_template_name,
          report_details: []
        }
        iteration.templates.push(template)
      }

      // 此时可以安全使用扩展运算符
      template.report_details = [...template.report_details, item]
      // 或直接push，性能更优
      // template.report_details.push(item)
    })
  } catch (err) {
    console.error('数据请求失败:', err)
  }
}

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