Vue中数组的动态替换和变更存在不及时相应的问题,根据官网给的方法可以解决
vm.$set(vm.items, indexOfItem, newValue)
项目开发中碰到了,数组循环数组,遍历展示数组中数组,进行手动分页,分页完成后发现DOM结构没有及时响应,根据排查发i西安数组内的数组没有及时响应,于是用了上面的方法,可是数据依旧没有被响应,问题出在了数组外还有一层数组,导致你不能对数组中的某一个数组进行变更,你需要通过改变最外层数组从而到达改变深层数组的需求,代码如下
/ 手动分页
logpagenation(page,item,index){
//page 当前页数
//item是内数组的某一条数据,后来发现没用
//index是外层数组的下标
let objx = this.mainData[index]
objx.historyData = []
this.$set(this.mainData,index,objx)
let count;
if (objx.auditRecordList.length - (page - 1) * this.historyPageSize < this.historyPageSize) {
count = objx.auditRecordList.length;
} else {
// 如果满足一页,那么count的值 就是几页
count = page * this.historyPageSize;
}
let arrData = []
for (let i = (page - 1) * this.historyPageSize; i < count; i++) {
arrData.push(objx.auditRecordList[i]);
}
let obj = this.mainData[index]
obj.historyData = arrData
this.$set(this.mainData,index,obj);
},