Vue中编辑数组内对象选项时影响其他同类型对象问题排查

问题原因分析 #

核心原因：浅拷贝导致引用类型共享 #

添加新元素时使用Object.assign({}, newElement)做浅拷贝，但Object.assign仅能拷贝对象第一层属性，对于嵌套数组（如checkboxes类型的options和selected），拷贝的是数组内存引用而非新数组实例。这导致所有从同一模板创建的checkboxes组件共享同一个options数组引用——修改其中一个的选项，其他同类型元素的选项会同步变化。

次要问题：全局模态框状态复用冲突 #

所有checkboxes元素共用同一个全局checkboxesmodal状态变量，多元素编辑时会出现状态混淆，加剧问题表现。

优化方案 #

1. 实现深拷贝，彻底隔离引用 #

修改newquestion方法，将浅拷贝替换为深拷贝，确保每个新元素的嵌套数组都是独立实例：

newquestion(element) {
  this.qindex++;
  // JSON序列化实现深拷贝（适用于无复杂类型的场景）
  const newElement = JSON.parse(JSON.stringify(element));
  newElement.tabindex = this.qindex;
  this.quests.push(newElement);
}

若元素包含函数、Symbol等JSON无法序列化的类型，可使用lodash.cloneDeep替代（需先安装lodash依赖）。

2. 为每个元素绑定独立的模态框状态 #

将全局模态框状态移至每个quest对象内部，避免多元素共享状态冲突：

• 修改newquestion方法，初始化元素独立的模态框状态：

newquestion(element) {
  this.qindex++;
  const newElement = JSON.parse(JSON.stringify(element));
  newElement.tabindex = this.qindex;
  // 为不同类型元素初始化独立模态框状态
  newElement.checkboxesmodal = false;
  newElement.freeresponsemodal = false;
  this.quests.push(newElement);
}

• 模板中修改模态框触发与绑定逻辑：

<!-- 修改编辑按钮点击事件 -->
<i @click="quest.checkboxesmodal = !quest.checkboxesmodal" class="far fa-edit"></i>

<!-- 修改模态框v-model绑定 -->
<b-modal v-model="quest.checkboxesmodal" ok-only title="Edit this element">

3. 简化选项添加逻辑（可选） #

深拷贝后options已是独立数组，可简化adoption方法：

adoption(quest) {
  quest.options.push("");
}

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