vue.js - 修改右侧属性没有点击保存按钮数据是如何保存的呢？

问题描述

问 题

新写了一个动态添加表单的demo，点击左侧按钮，根据点击的类型不同，生成不同的表单，右侧相应的出现该表单的属性设置项，demo做好之后发现我不点击保存按钮修改之后的数值就会自动保存到tplList相应的数组中，觉得很神奇，我怀疑是对象覆盖引起的，也就是下面这句代码：

this.tplList.push(obj1);
this.singleData=obj1.attr;

tplList和singleData通过obj1.attr联系起来，我使用v-model双向绑定了右侧的姓名选项，每次修改都能会更新singleData里面的name属性，是不是这样导致了tplList中attr下的name也一起保存了呢？如果是的话以后如何避免这种操作呢？

demo地址

bug重现操作：
（1）点击左侧input按钮
（2）修改右侧姓名张三为张三2
（3）点击左侧date按钮（其他的也行，radio慢一点）
（4）再点击中间第一项，此时右侧姓名变成了张三2

我的初衷是点击保存之后再点击第一项才会出现张三2

补充下我的界面逻辑：
界面分为左中右三部分：
左边是按钮：根据点击的按钮类型向tplList中push相应的数据
中间是表单集合：根据tplList的项循环输出相应类型的表单
右侧是相应表单的属性：与tplList中每项中的attr绑定，点击中间的表单类型右侧出现相应的属性设置项

tplList存储表单类型，每项中包含该表单类型的设置项（存储在attr中）
singleData是临时数组，用来存放表单属性的

1、点击左侧按钮
2、往tplList中push数据
3、清空singleData
4、将刚才数据中的attr数据赋值给singleData
5、右侧属性与singleData双向数据绑定，修改之后点击保存按钮将singleData中的数值覆盖对应的表单数据中的attr

感谢@Whalefallsea的回答，解决后的代码地址为（代码做了优化）：
https://jsfiddle.net/zhoou/s7...

解决方案

以下是我的浅见：

其实真正的原因是在这段代码

this.tplList.push(obj1);
this.singleData={};
this.singleData=obj1.attr;

上面这段代码，你把同个对象赋给了两个对象，而对象是引用类型。打个比方，

var c = {};
var a = c;
var b = c;
a.name = 'hehe';
b.name === 'hehe' //true

也就是说a修改之后，b也会跟着改。所以才会出现你说的那个bug,你的input输入框双向绑定了singleData.name，它被修改，当然跟它引用同个对象的this.tplList[this.index].attr.name也会跟着改变。
接着点击中间的时候执行的函数将改变后的this.tplList[this.index].attr赋给this.singleData：

setAttr:function(index){
    this.index=index;
    this.singleData={};
    this.singleData=this.tplList[this.index].attr;
}

so,这个可能就是真相了。。。

这篇关于vue.js - 修改右侧属性没有点击保存按钮数据是如何保存的呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！