VueJS 2中如何更新JSON数组指定ID对应字段值？

嘿，刚接触JSON操作别慌，这需求在Vue2里很容易实现～先提个小细节：你提供的JSON示例里每个对象都有重复的value1键，这在JSON规范里是不合法的，解析时后面的键会覆盖前面的，建议改成value1、value2这类唯一键名哦。

接下来是具体实现方法，假设你的数组存在Vue组件的data中：

方法一：使用Array.find()定位并修改 #

这是最直接的方式，利用数组的find方法找到对应applicantID的对象，然后直接更新它的group属性——因为Vue2会自动追踪响应式对象的属性变化，所以修改后视图会同步更新。

export default {
  data() {
    return {
      applicants: [
        { 
          "applicantID": 3, 
          "fullName": "name", 
          "value1": 30, 
          "value2": 31, 
          "value3": 40, 
          "value4": 41, 
          "value5": "50", 
          "value6": "51", 
          "group": 0, 
          "flag": true 
        },
        { 
          "applicantID": 4, 
          "fullName": "name", 
          "value1": 30, 
          "value2": 31, 
          "value3": 40, 
          "value4": 41, 
          "value5": "50", 
          "value6": "51", 
          "group": 0, 
          "flag": false 
        }
      ]
    };
  },
  methods: {
    updateApplicantGroup(targetId, newGroup) {
      // 找到匹配applicantID的对象
      const targetApplicant = this.applicants.find(item => item.applicantID === targetId);
      
      if (targetApplicant) {
        // 直接更新group字段
        targetApplicant.group = newGroup;
      } else {
        console.log(`未找到applicantID为${targetId}的记录`);
      }
    }
  }
};

调用这个方法很简单，比如你要实现WHERE applicantID = 3 SET group = 4，只需要在合适的地方执行：

this.updateApplicantGroup(3, 4);

方法二：用this.$set确保响应式（可选） #

如果你的对象是后续动态添加到数组中的，或者担心响应式失效，可以用Vue提供的$set方法来更新属性，这是更稳妥的写法：

if (targetApplicant) {
  this.$set(targetApplicant, 'group', newGroup);
}

这个方法会强制Vue检测到属性变化，确保视图更新，不过对于原本就在data中的对象，第一种方法已经完全够用啦。

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