如何正確使用Vue的JS與lodash防抖動看

我使用lodash調用去抖功能的組件上，像這樣：如何正確使用Vue的JS與lodash防抖動看

... 
import _ from 'lodash'; 

export default { 
    store, 
    data:() => { 
     return { 
      foo: "", 
     } 
    }, 

    watch: { 
     searchStr: _.debounce(this.default.methods.checkSearchStr(str), 100) 
    }, 

    methods: { 
     checkSearchStr(string) { 
      console.log(this.foo) // <-- ISSUE 1 
      console.log(this.$store.dispatch('someMethod',string) // <-- ISSUE 2 
     } 
    } 
}

問題1是我的方法checkSearchStr不知道foo
問題2是我的店是undefined以及

爲什麼沒有我的方法知道this通過01調用時？什麼是正確的用法？

來源

2017-07-18 Grigio

你的手錶應該看起來像這樣。

watch: { 
    searchStr: _.debounce(function(newVal){ 
     this.checkSearchStr(newVal) 
    }, 100) 
},

但是，這有點不尋常。我不明白你爲什麼要去除手錶。可能你寧願只是反彈checkSearchStr方法。

watch: { 
    searchStr(newVal){ 
     this.checkSearchStr(newVal) 
    } 
}, 

methods: { 
    checkSearchStr: _.debounce(function(string) { 
     console.log(this.foo) 
     console.log(this.$store.dispatch('someMethod',string)) 
    }, 100) 
}

我還想指出另外一件事情;沒有在代碼中定義了searchStr。當您用Vue觀看價值時，您正在觀看數據或計算出的財產。正如您目前定義的那樣，searchStr上的手錶將永遠不會執行。

來源

2017-07-18 23:31:33 Bert

我認爲函數內部的'this'（this.foo）不是VueJS。 – rogeriolino

@rogeriolino那不正確。當組件被實例化時，該方法被綁定到組件。換句話說，'this' *將會是Vue。 – Bert

我剛剛發現了'debounce'的Vue.js文檔（文檔 - https://vuejs.org/v2/guide/migration.html#debounce-Param-Attribute-for-v-model-removed）。感謝您的回答（第2部分），這非常有幫助。我不應該在觀看的元素上運行'debounce'。 – Grigio

如何正確使用Vue的JS與lodash防抖動看

回答

相關問題