Error in callback for watcher

supernavy 发布于2019-08-26 18:26 / 1790人阅读

摘要：问题一个报错的问题处理解决方法箭头函数改变了指向这样会报错，箭头函数导致指向出错，改成这样就好了上面那样写会报错，改成下面这样就可以了，不要使用箭头函数

问题：

一个报错的问题处理：Error in callback for watcher "checkList": "TypeError: Cannot read property

解决方法：（箭头函数改变了指向）

handler:(val,oldVal)=>{} 这样会报错，箭头函数导致this指向出错，改成handler:function(val,oldVal){}这样就好了

watch:{
    checkList:{
        handler:(oldValue,newValue) => {
            let _sum = 0
            this.orderData.forEach(item => {
                if(this.checkList[item.order_id]){
                    _sum += item.service_price
                }
            })
            this.sum = _sum
        },
        deep:true
    }
},

　　上面那样写会报错，改成下面这样就可以了，不要使用箭头函数

watch:{
    checkList:{
        handler:function(oldValue,newValue){
            let _sum = 0
            this.orderData.forEach(item => {
                if(this.checkList[item.order_id]){
                    _sum += item.service_price
                }
            })
            this.sum = _sum
        },
        deep:true
    }
},

云服务器 GPU云服务器 for-in js js for-in watcher callback

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110197.html

从Vue.js源码看异步更新DOM策略及nextTick

摘要：我们发现默认是使用异步执行更新。优先使用，在不存在的情况下使用，这两个方法的回调函数都会在中执行，它们会比更早执行，所以优先使用。是最后的一种备选方案，它会将回调函数加入中，等到执行。写在前面因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。文章的原地址：https://github.com/ans...

leo108 2019-08-21 16:43 评论0 收藏0
VueJS源码学习——实例构造函数

摘要：大概过了一遍工具类后，开始看实例的具体实现原文地址项目地址实现了的初始化函数方法会在实例创建的时候被调用初始化了实例的共有属性如还有一堆私有属性如等等最后再是初始化实例状态事件生命周期等等在实现上比较有趣使用来实现对的和方法利用获取大概过了一遍 util 工具类后，开始看 Vue 实例的具体实现原文地址项目地址 init src/instance/init.js 实现了 Vue 的...

jhhfft 2019-08-20 19:06 评论0 收藏0
【Vue源码】Vue中DOM的异步更新策略以及nextTick机制

摘要：本篇文章主要是对中的异步更新策略和机制的解析，需要读者有一定的使用经验并且熟悉掌握事件循环模型。这个结果足以说明中的更新并非同步。二是把回调函数放入一个队列，等待适当的时机执行。通过的主动来触发的事件，进而把回调函数作为参与事件循环。本篇文章主要是对Vue中的DOM异步更新策略和nextTick机制的解析，需要读者有一定的Vue使用经验并且熟悉掌握JavaScript事件循环模型。 ...

selfimpr 2019-08-26 11:46 评论0 收藏0
Vue nextTick 机制

摘要：而和的延迟明显是小于的。因为的事件机制是通过事件队列来调度执行，会等主进程执行空闲后进行调度，所以先回去等待所有的进程执行完成之后再去一次更新。因为首先触发了，导致触发了的，从而将更新操作进入的事件队列。这种情况会导致顺序成为了。背景我们先来看一段Vue的执行代码： export default { data () { return { msg: 0 ...

Rindia 2019-08-22 16:48 评论0 收藏0