私は lodash を使用して、次のようにコンポーネントの debounce 関数を呼び出しています。
...
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
なぜ私のメソッドは を通じて呼び出されたことを認識しないのでしょうか_.debounce
? 正しい使用法は何ですか?
ベストアンサー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
実行されません。