VueJS2中更新数组数据时如何仅修改属性而不新增数组元素

架构老林

2026-9-27

实现方案

问题原因

你当前的逻辑是接收子组件的事件数据后，直接将数据追加到数组中，没有做现有条目匹配，因此每次修改都会触发新增。

具体实现步骤

子组件发射更新事件时，必须携带当前编辑条目的P_uniqueID、修改后的name和iso6393Char3Code三个字段
父组件监听事件的回调逻辑中，先根据P_uniqueID匹配数组中已有的对应条目，再做更新而非新增：

Vue3 示例代码

// 假设你存储表单的数组为formList，子组件emit返回的更新数据为formItem
const updateFormItem = (formItem) => {
  // 查找匹配ID的数组下标
  const targetIndex = formList.value.findIndex(item => item.P_uniqueID === formItem.P_uniqueID)
  if (targetIndex !== -1) {
    // 匹配到原有条目，直接更新指定属性
    formList.value[targetIndex] = {
      ...formList.value[targetIndex],
      name: formItem.name,
      iso6393Char3Code: formItem.iso6393Char3Code
    }
  }
  // 仅在需要新增条目的场景下才执行push操作
  // else {
  //   formList.value.push(formItem)
  // }
}

Vue2 示例代码

Vue2中直接通过下标修改数组不会触发响应式更新，需要使用$set方法：

methods: {
  updateFormItem(formItem) {
    const targetIndex = this.formList.findIndex(item => item.P_uniqueID === formItem.P_uniqueID)
    if (targetIndex !== -1) {
      const newItem = {
        ...this.formList[targetIndex],
        name: formItem.name,
        iso6393Char3Code: formItem.iso6393Char3Code
      }
      this.$set(this.formList, targetIndex, newItem)
    }
  }
}