Error in callback for watcher

supernavy 發布于2019-08-26 18:26 / 1818人閱讀

摘要：問題一個報錯的問題處理解決方法箭頭函數改變了指向這樣會報錯，箭頭函數導致指向出錯，改成這樣就好了上面那樣寫會報錯，改成下面這樣就可以了，不要使用箭頭函數

問題：

一個報錯的問題處理：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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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