vue两对象赋值后一直相等,或改变一个对象另一个对象跟着改变问题
在vue中,假如定义一个对象var obj1 = {index:1,name:first}var x = obj1;obj1.index = 2;console.log(x.index)这个得出的结果也是2,原因好像是vue将obj1的地址给了x,这样x实际是指向的obj1相当于指针。今天在实际应用中也发现一个更隐藏的bug。load(){this.old = [...
·
在vue中,假如定义一个对象
var obj1 = {
index:1,
name:first
}
var x = obj1;
obj1.index = 2;
console.log(x.index)
这个得出的结果也是2,原因好像是vue将obj1的地址给了x,这样x实际是指向的obj1相当于指针。今天在实际应用中也发现一个更隐藏的bug。
load(){
this.old = []
},
add(){
this.news={
index:'',
name:'',
val:''
}
},
quit(){
this.news = this,old;
},
save(){
this.old = this.news;
}
这是一个表单提交,提交是在页面切换另一个div。定义了old数据,如果取消就返回原来的数据。但是在测试的时候出现了一个问题,就是第一次取消没有问题,第二次取消news里就有了值。这是不应该的,两次取消都应该返回最开始的值。
问题就出现在 this.news = this.old。这实际上是讲old和news进行了绑定,这样第一次取消的时候就进行了old和news的绑定。不知道是不是vue内部问题,然后第二次add() 时对news赋值实际上也是对old赋值,之后执行quit()时,this.news=this.old实际上是
this.news = {
index:'',
name:'',
val:''
}
在这之前old已经变成了
{
index:'',
name:'',
val:''
}
这里的解决方式就是在赋值的时候转一下json格式,这样指的就不是地址了。
this.old = JSON.parse(JSON.stringify(this.news));
如有错误,欢迎指正
更多推荐
已为社区贡献2条内容
所有评论(0)