正しくVueのJSが

Question

私はそうのようなコンポーネントにデバウンス機能を呼び出すためにlodashを使用してい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は私の店は01を通じて呼び出されたときに、私の方法はthisを知らないのはなぜundefined同様

であるということです？正しい使い方は何ですか？

Answer 1

時計は次のようになります。

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の時計は決して実行されません。