Ho una semplice casella di input in un modello Vue e vorrei usare il debounce più o meno in questo modo:
<input type="text" v-model="filterKey" debounce="500">
Tuttavia, la debounce
proprietà è stata deprecata in Vue 2 . La raccomandazione dice solo: "usa v-on: input + funzione di debounce di terze parti".
Come lo implementate correttamente?
Ho provato a implementarlo usando lodash , v-on: input e v-model , ma mi chiedo se sia possibile fare a meno della variabile extra.
Nel modello:
<input type="text" v-on:input="debounceInput" v-model="searchInput">
Nello script:
data: function () {
return {
searchInput: '',
filterKey: ''
}
},
methods: {
debounceInput: _.debounce(function () {
this.filterKey = this.searchInput;
}, 500)
}
La chiave filtro viene quindi utilizzata in seguito negli computed
oggetti di scena.