vue开发过程中数组新push一个对象,其他对象同时被修改

vue开发过程中数组新push一个对象,其他对象也同时被修改

微信公众号:前端程序猿之路
关注可了解更多的前端知识,反馈问题或建议,请公众号留言。
如果你觉得公众号内容对你有帮助,欢迎关注并转载

		this.targetData.push(item)
		
		原因:vue开发数组push一条对象而导致之前push进去的对象也变成后面进去对象的值,百度发现原因是对象
	是引用类型,传递的是引用地址,所以两个数组引用的是同一个对象,只要其中一个数组改变,就会导
	致对象改变,进而另一个引用的数组也会改。
	
		解决方法:将需要放入数组的对象先深拷贝一份,用拷贝的对象,这样就不存在引用关系了。
	
	1. 拷贝方式一:Object.assign({},需要拷贝的对象)
		eg:const target = { x: 1 };
			const content1= { m: 2 };
			const content2= { l: 3 };
			Object.assign(target,content1,content2);
			Object.assign方法中第一个参数是目标对象,之后的参数全都是源对象。
			结果:target // {x:1, m:2, l:3}
			
	   拷贝方式二:JSON.parse(JSON.stringify(需要拷贝的对象)) 
	   	eg:this.targetData = JSON.parse(JSON.stringify(this.targetDataPar))
	   	
	2. 重新申请一个内存空间,然后赋值给他,再push,实现深拷贝
        eg:let obj={                        
            id: this.randomArr(200, 0, 500),                        
            key: this.originalCheckedData[index].key,                       
            label: this.originalCheckedData[index].label,                   
        }                   
        this.targetData.push(obj)    

欢迎关注公众号,有你想要的前端知识:
在这里插入图片描述

  • 6
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值