vue对数组变化不刷新问题

vue

场景

在一个选项卡中,修改数据之后,用的是vue本身的方法去把处理完的数据放到已处理中(存在问题,切换选项卡变空白),

vue

如:
1
2
3
var item = this.deepCopySingle(unprocessed[index]);//deepCopySingle为深拷贝
unprocessed.splice(index, 1);
processed.unshift(data);

数据结构是这样的:

1
2
3
4
5
/*数据列表*/
data: {
processed: [],//处理
unprocessed: []//未处理
}

解决方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*深拷贝*/
deepCopy(arr) {
return arr.map((e) => {
if (typeof e === 'object') {
return Object.assign({}, e)
} else {
return e
}
})
},
/*处理选项切换*/
handleTabClick(tab) {
//创建临时数据结构
let objData = {
processed: [],
unprocessed: []
}
//深拷贝(这里本可以用对象遍历的方式,不过因为自己组件中常用数组,所以就没有去单写)
objData.processed = this.deepCopy(this.remind.data.processed)
objData.unprocessed = this.deepCopy(this.remind.data.unprocessed)
//重新赋值触发刷新
this.remind.data = objData
},
文章目录
  1. 1. 场景
  2. 2. 解决方法:
|