Eu tenho uma caixa de entrada simples em um modelo do Vue e gostaria de usar o debounce mais ou menos assim:
<input type="text" v-model="filterKey" debounce="500">
No entanto, a debounce
propriedade foi descontinuada no Vue 2 . A recomendação diz apenas: "use v-on: input + função de debounce de terceiros".
Como você o implementa corretamente?
Eu tentei implementá-lo usando lodash , v-on: input e v-model , mas estou pensando se é possível fazer isso sem a variável extra.
No modelo:
<input type="text" v-on:input="debounceInput" v-model="searchInput">
No script:
data: function () {
return {
searchInput: '',
filterKey: ''
}
},
methods: {
debounceInput: _.debounce(function () {
this.filterKey = this.searchInput;
}, 500)
}
A chave de filtro é então usada mais tarde em computed
adereços.