问题
如图,编辑table中某行的信息,发现在编辑框中修改名称的时候,表格中的信息同步更新。。。
检查原因
编辑页面打开时,需要读取选中行的信息,并在页面中回显。代码中直接将当前行的数据对象赋值给编辑框中的表单对象了,这只是简单的让form指向了row的地址,并没有逐个的赋值其中的字段。
this.form = row;
这样,当我在表单中更新某个字段的值的时候,我期望更新的是form中的数据,然而,因为form和row实际指向的是同一块数据空间,所以,row中的数据,也同步更新,就出现了我最开始的问题。
解决方案
那么,在获取选中行信息时,不能简单的进行赋值,而需要进行拷贝。可以使用Object.assign函数,将row中的数据拷贝到this.form中:
Object.assign(this.form,row)
数组
同理,数组存在同样的问题
某select的Option需要在一个已有数组的基础上进行删减,但是原数组不能变。
最初使用的是newArr = arr的方式,在对newArr进行了一些列的操作后,发现arr的值成员也被修改了。
改为newArr = arr.slice() 正常。
另,如果想要实现两个数组的拼接,可用arr1 = arr1.concat(arr2)的方法
参考:JavaScript Array slice() 方法