问题描述:
定义了两个属性A、B,都是数组类型,两个属性同时赋予了同样的值。
目的:a操作后,A数组会更改,b操作后,A数组的值会变回B数组。
//定义:
tableData: [],
tableTmpData: []
//赋值:
this.tableData = res.data
this.tableTmpData = res.data
//操作a
删除 this.tableData 中的某些元素
//操作b
恢复 this.tableData (值恢复到初始状态)
结果:A数组更改后,B数组同时被修改
问题原因:VUE2中两个数组来源于同一个对象的指针引用,数组间传递的是引用地址,因此两个数组引用的是同一个对象,只要其中一个数组改变,另一个数组就会改变。
解决方法:
//赋值时,这样写(等同遍历tableData后重新赋值,“...”是ES6的语法:扩展运算符):
this.tableData = res.data
this.tableTmpData = [...this.tableData]
//删除tableData中某些元素时,可以重新赋值,例如:
const newData = []
this.tableData.forEach(function (item, index) {
if (item !== '') {
newData.push(item)
}
})
this.tableData = newData