web-dev-qa-db-ja.com

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であることです

_.debounceから呼び出されたときに、メソッドがthisを認識しないのはなぜですか？そして正しい使い方は何ですか？

javascriptvue.jsvuejs2lodashvuex
20
Artur 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)
}

もう1つ指摘したいことがあります。コードのどこにもsearchStrが定義されていません。 Vueで値を監視するときは、データまたは計算されたプロパティを監視しています。現在定義しているように、searchStrの監視は実行されません。

29
Bert