先上代码
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)这块内容相似
bug解决完成