У мене є просте поле введення в шаблоні 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
реквізиті.