Vue中把对象中的数据给了某个变量,改变一个对象的值,另一个对象也变化的解决方案

在vue中的data数据中建立这两个对象

var salesOreder = new Vue({
	delimiters: ['${', '}'], [想知道这里的作用解释请看这里](https://blog.csdn.net/qq_46124502/article/details/106326034)
	data(){
        return {
            objData1:{
                 name:"zky"
               },
            objData2:""
              }
         }
    })

此时把objData1的里的内容赋值给objData2中,发现当改变objData2中的内容时,objData1中的内容也会发生改变

this.objData2 = this.objData1
this.objData2.name = ”朱康宇”
console.log(this.objData2.name)//朱康宇
console.log(this.objData1.name)//朱康宇
//此时你会发现我只是修改了this.objData2.的值,但this.objData1中的值也发生了改变

原因是对象的赋值不像常量赋值那样,对象的赋值 实际是拷贝的地址,此时objData1和objData2共同指向的是一个地址,所以无论是objData1改变还是objData2改变 ,两者都会发生改变,因为它门同时指向一个地址
解决方案:
先让 objData1变成字符串然后在转换成对象,这样做的目的是,两个对象分别指向了各自的内存也就是地址

this.objData2 = JSON.parse(JSON.stringify(this.objData1))
this.objData2.name = ”朱康宇”
console.log(this.objData2.name)//朱康宇
console.log(this.objData1.name)//zky
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值