Vue中如何按ID向对象添加多组数据而非覆盖原有内容？

问题分析 #

你想要的目标结构应该是这样的（修正格式以符合JS对象规范）：

{
  30: [
    { field: 'name', value: 'rob' },
    { field: 'address', value: '12 randomstreet' }
  ]
}

当前代码的问题在于：每次调用editRole都会新建空的savingChangesObj，并且直接将payload.id对应的值赋值为单个对象，导致每次输入都会覆盖之前的数据，同时也没有形成目标的数组嵌套结构。

解决方案 #

步骤1：将存储对象改为组件响应式数据 #

不能每次函数调用都新建空对象，要把它放在组件的data中，这样才能持续存储累积的修改：

export default {
  data() {
    return {
      savingChangesObj: {}
    }
  },
  methods: {
    editRole(payload) {
      // 后续逻辑写在这里
    }
  }
}

步骤2：处理嵌套数组的添加/更新逻辑 #

根据需求分两种场景处理：

场景1：同一ID下允许追加同字段记录

如果希望同一ID下可以添加多个同字段的记录，直接往数组中push新对象：

editRole(payload) {
  // 先判断当前ID对应的数组是否存在，不存在则初始化空数组
  if (!this.savingChangesObj[payload.id]) {
    // Vue2中需用this.$set确保响应式，Vue3可直接赋值
    this.$set(this.savingChangesObj, payload.id, [])
  }
  // 往数组中添加新的字段对象
  this.savingChangesObj[payload.id].push({
    field: payload.field,
    value: payload.value
  })
  console.log(this.savingChangesObj)
}

场景2：同一ID下同一字段只保留最新值

如果希望同一ID下的同一字段值被修改时直接更新，而非新增项：

editRole(payload) {
  if (!this.savingChangesObj[payload.id]) {
    this.$set(this.savingChangesObj, payload.id, [])
  }
  // 查找数组中是否已有该字段的项
  const existingItem = this.savingChangesObj[payload.id].find(item => item.field === payload.field)
  if (existingItem) {
    // 存在则更新value
    existingItem.value = payload.value
  } else {
    // 不存在则新增项
    this.savingChangesObj[payload.id].push({
      field: payload.field,
      value: payload.value
    })
  }
  console.log(this.savingChangesObj)
}

响应式注意事项 #

• Vue2中直接给对象新增属性不会触发响应式更新，所以需要用this.$set来添加新的ID键；
• Vue3使用Proxy代理对象，直接赋值即可自动监听响应式，无需额外处理。

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