zoukankan      html  css  js  c++  java
  • 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没有及时更新的问题啊。算了不想了,解决就好。

  • 相关阅读:
    axios解决调用后端接口跨域问题
    vuex的使用入门-官方用例
    vue使用axios实现前后端通信
    vue组件间通信用例
    vue-router的访问权限管理
    vue-router使用入门
    PHP 流程控制
    PHP 表达式和运算符
    PHP 预定义变量
    PHP 常量
  • 原文地址:https://www.cnblogs.com/sanhuamao/p/14455783.html
Copyright © 2011-2022 走看看