Vue 템플릿에 간단한 입력 상자가 있으며 다음과 같이 디 바운스를 사용하고 싶습니다.
<input type="text" v-model="filterKey" debounce="500">
그러나이 debounce
속성은 Vue 2에서 더 이상 사용되지 않습니다 . 권장 사항에는 "v-on : input + 타사 디 바운스 기능 사용"만 나와 있습니다.
어떻게 올바르게 구현합니까?
lodash , v-on : input 및 v-model을 사용하여 구현하려고 시도했지만 추가 변수없이 가능한지 궁금합니다.
템플릿에서 :
<input type="text" v-on:input="debounceInput" v-model="searchInput">
스크립트에서 :
data: function () {
return {
searchInput: '',
filterKey: ''
}
},
methods: {
debounceInput: _.debounce(function () {
this.filterKey = this.searchInput;
}, 500)
}
그런 다음 필터 키는 나중에 computed
소품 에서 사용됩니다 .