Vue JS 2中如何更新或新增数组内对象，实现同ID数据自动替换？

实现逻辑 #

• 首先查找现有数组中与新条目id一致的元素索引
• 若找到对应索引，使用Vue2响应式API替换该位置元素，保证视图同步更新
• 若未找到索引，直接向数组尾部追加新条目

代码示例 #

首先在Vue实例的methods中封装公用方法：

new Vue({
  data() {
    return {
      segmentValues: [
        { id: 1, value: 'Foo' },
        { id: 2, value: 'Boo' }
      ]
    }
  },
  methods: {
    addOrUpdateSegment(newItem) {
      // 查找同id条目的索引
      const existIndex = this.segmentValues.findIndex(item => item.id === newItem.id)
      if (existIndex !== -1) {
        // 存在同id条目，用$set替换保证响应式，也可以用splice方法：this.segmentValues.splice(existIndex, 1, newItem)
        this.$set(this.segmentValues, existIndex, newItem)
        // 如果需要保留原有对象的其他属性，仅覆盖新传入的属性，可以改成以下写法：
        // this.$set(this.segmentValues, existIndex, Object.assign({}, this.segmentValues[existIndex], newItem))
      } else {
        // 不存在同id条目，直接新增
        this.segmentValues.push(newItem)
      }
    }
  }
})

调用方式：

// 传入id为2的新条目，会自动替换原有条目
this.addOrUpdateSegment({id: 2, value:'Gogo'})

注意事项 #

Vue2存在响应式限制，直接通过this.segmentValues[existIndex] = newItem的方式修改数组元素，无法触发视图更新，必须使用$set或者splice方法执行修改操作。

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