Vue中如何正确生成目标嵌套数组？现有代码结构不符问题排查

看起来你当前的代码是把每一组日期+时间都和会议基本信息（名称、链接、密码）重复存储了，导致最终生成的是一个包含多个重复会议信息的数组，而你需要的是单个对象，顶层放全局的会议信息，下面用meetingTimes数组来归集所有日期和对应的时间段。

下面是具体的修改步骤和代码：

1. 调整数据存储逻辑 #

首先修改data里的变量，把原来的datesFinal改成专门存储日期和时间段的数组（比如命名为meetingTimeSlots），因为会议名称、链接、密码是全局的，不需要每个日期都存一份：

data: () => ({
  selectedTime: [],
  dates: new Date().toISOString().substr(0,10),
  meetingTimeSlots: [], // 替换原来的datesFinal，只存日期和对应的时间段
  meetingSettingUrl: "",
  meetingPW: "",
  generatedLink: false,
  meetingName: "",
  dialog: false,
  menu: false,
  modal: false,
  menu2: false,
  menu3: false
}),

2. 修改saveDateAndTIme方法 #

这个方法只需要保存当前选择的日期和对应的时间段，不需要重复带上会议基本信息：

saveDateAndTIme(e) {
  // 浅拷贝selectedTime，避免后续清空时影响已保存的数据
  const timeCopy = [...this.selectedTime].map(item => ({...item}));
  this.meetingTimeSlots.push({ 
    date: this.dates, 
    times: timeCopy
  })
  this.selectedTime = [];
}

这里用了两层浅拷贝，确保每个时间段对象都是独立的，不会和后续新增的时间段产生引用关联。

3. 修改generateMeetingLink方法 #

在生成链接的时候，把全局的会议信息和收集的日期时间段组装成你需要的目标结构：

generateMeetingLink(){
  const meetinId = this.meetingName
  this.meetingSettingUrl = `http://localhost:8080/${meetinId}`
  this.generatedLink = true
  
  // 组装成目标格式的对象
  const finalMeetingData = {
    meetingName: this.meetingName,
    meetingPw: this.meetingPW,
    meetingUrl: this.meetingSettingUrl,
    meetingTimes: this.meetingTimeSlots
  }
  
  console.log(JSON.stringify(finalMeetingData))
  // 这里可以添加后续逻辑，比如把finalMeetingData发送到后端或者做其他处理
}

为什么原来的代码不符合预期？ #

你之前的saveDateAndTIme方法每次都会把meetingName、meetingUrl、meetingPw和当前日期时间一起push到datesFinal数组，导致最终输出的是多个包含重复会议信息的对象数组。而目标结构要求这些全局信息只出现一次，所有日期时间段归集在meetingTimes数组下，通过上面的修改就能实现这个转换。

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