可以正常赋值但是v-model绑定的值无法响应解决方法

46 阅读1分钟

先上代码

setProduct(e) { 
    this.ruleForm.allocateGoodsList = [...e] 
    this.ruleForm.allocateGoodsList.forEach((item) => { if(!item.num) { item.num = 0 }   }) 
},

这里对一个数组进行了深拷贝后对num进行了赋值,随后发现在页面中绑定num的输入框无法响应式更新 查了相关资料感觉原因是 Vue的响应式系统可能没有正确追踪这些变化。因为 Vue 的响应式系统是基于对象和数组的初始状态的,直接替换整个数组会导致 Vue 无法追踪数组中对象的变化。

修改后代码

setProduct(e) {
  this.ruleForm.allocateGoodsList = e.map((item) => {
    if (!item.num) {
      return { ...item, num: 0 };
    }
    return item;
  });
}

因为map返回新的数组,并没有过多操作,想想应该和前几天看react文档的强调突变(mutation)这块内容相似

image.png

bug解决完成