Vue 数组嵌套中循环数组改变值未响应

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);
    },

 

你可能感兴趣的:(Vue)