vue |数据更新了,但数组操作没有使用最新数据

在写vue项目,碰见一个问题,可把我愁死了。这首先有一个动态属性,它是一个数组对象,然后一个组件绑定了该属性里面的值,触发事件也会动态改变该值。大概是这样:

data(){
    list:[
        {id:1,count:0},
        {id:2,count:0},
    ]
}
<div v-for="(item, key) in list" :key="key">
    <van-stepper
        @plus="changeCount"
        v-model="item.count"
    />
</div>

后面就是对list进行过滤操作了,我想过滤出count不等于0的元素。然而发现,即使数据更新了,这个操作却还是在之前数据的基础上过滤的:(这个问题出现在第一次触发的时候)

changeCount(item){
    console.log(item)//改变了
    console.log(list)//改变了
    let result=list.filter(...)//是在触发事件前的原始数据上过滤的,没有过滤出来东西
    console.log(list)//改变了   
}

想得要死要活也不知道为什么,最后凭着“试试”的想法,用了this.$nextTick就解决了。

changeCount(item){
    let result
    this.$nextTick(function () {
        result=list.filter(...)
    })
}

官方对这个方法的解释是:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

但我寻思着这也不存在DOM没有及时更新的问题啊。算了不想了,解决就好。

原文地址:https://www.cnblogs.com/sanhuamao/p/14455783.html