JS中对象赋值改变新值的时候不影响旧值

起因

今天在做项目的时候,页面里面有两个表格,这两个表格的初始数据都是一样的要从数据库读取出来,然后让用户来修改 从图片可以看出,上面的表格是不允许修改的,但是下面的表格是可以修改的

它来了

就在我数据渲染完成之后,我点击添加下面表格是多出一行了,但是上面的表格也多了一行,删除按钮同理.哎呀,这可不行啊,上面表格怎么可以让它修改呢?

原因

经过一番查找才发现,还是自己太菜了,js里面的数组传递的是地址呀(基础知识不扎实,吃了没文化的亏)

if(r.listData != null && r.listData.length > 0){
   vm.$set(vm.formData, field, r.listData);
  }else{
   vm.$set(vm.formData, field, null);
}       

我在拿到数据之后,直接就把数组赋值给了页面的变量,这个赋值是直接传递地址,就导致了上下两个表格其实用的是一个数据

解决方案

借助JSON.parse()和JSON.stringify()来对其进行深层拷贝

if(r.listData != null && r.listData.length > 0){
    let rrld = JSON.parse(JSON.stringify(r.listData));
    vm.$set(vm.formData, field, rrld);
  }else{
     vm.$set(vm.formData, field, null);
} 

就是先将对象深拷贝一份,这样两个表格使用的数据就不是同一份了.