Mam proste pole wejściowe w szablonie Vue i chciałbym użyć debounce mniej więcej w ten sposób:
<input type="text" v-model="filterKey" debounce="500">
Jednak debounce
właściwość została wycofana w Vue 2 . Zalecenie mówi tylko: „użyj v-on: wejście + funkcja odbicia strony trzeciej”.
Jak poprawnie to wdrażasz?
Próbowałem zaimplementować to za pomocą lodash , v-on: input i v-model , ale zastanawiam się, czy da się to zrobić bez dodatkowej zmiennej.
W szablonie:
<input type="text" v-on:input="debounceInput" v-model="searchInput">
W skrypcie:
data: function () {
return {
searchInput: '',
filterKey: ''
}
},
methods: {
debounceInput: _.debounce(function () {
this.filterKey = this.searchInput;
}, 500)
}
Klucz filtru jest następnie używany później we właściwościach computed
.
vue.js
vuejs2
debouncing
MartinTeeVarga
źródło
źródło
Odpowiedzi:
Używam pakietu debounce NPM i zaimplementowałem w następujący sposób:
Korzystając z lodash i przykładu w pytaniu, implementacja wygląda następująco:
źródło
v-model=your_input_variable
do wejścia i do swojego vuedata
. Więc nie polegasz nae.target
Vue, ale używasz Vue, dzięki czemu możesz uzyskać dostępthis.your_input_variable
zamiaste.target.value
this
do funkcji.Przypisanie odbicia
methods
może być kłopotliwe. Więc zamiast tego:Możesz spróbować:
Staje się problemem, jeśli masz wiele wystąpień składnika - podobnie jak
data
powinna być funkcja zwracająca obiekt. Każda instancja potrzebuje własnej funkcji odbicia, jeśli ma działać niezależnie.Oto przykład problemu:
źródło
data()
.zaktualizowany w 2020 r
Opcja 1: wielokrotnego użytku, bez dep
(Zalecane w razie potrzeby więcej niż raz w projekcie)
helpers.js
Component.vue
Codepen
Opcja 2: In-component, bez deps
(Zalecane, jeśli używasz raz lub w małym projekcie)
Component.vue
Codepen
źródło
Bardzo proste bez lodash
źródło
destroyed() { clearInterval(this.timeout) }
, aby nie mieć limitu czasu po zniszczeniu.Miałem ten sam problem i oto rozwiązanie, które działa bez wtyczek.
Ponieważ
<input v-model="xxxx">
jest dokładnie tym samym, co(źródło)
Pomyślałem, że mogę ustawić funkcję debounce na przypisaniu xxxx w
xxxx = $event.target.value
lubię to
metody:
źródło
@input="update_something"
akcję, wywołaj to pothat.xxx = val
that.update_something();
debounceSearch: function(val) { if (this.search_timeout) clearTimeout(this.search_timeout); var that=this; this.search_timeout = setTimeout(function() { that.thread_count = val; that.update_something(); }, 500); },
Na podstawie komentarzy i powiązanego dokumentu migracji dokonałem kilku zmian w kodzie:
W szablonie:
W skrypcie:
Metoda, która ustawia klucz filtru, pozostaje taka sama:
Wygląda na to, że jest jedno wywołanie mniej (tylko the
v-model
, a nie thev-on:input
).źródło
debounceInput()
dwa razy przy każdej zmianie?v-on:
wykryje zmiany danych wejściowych i odrzucenie wywołania, ORAZ ponieważ model jest powiązany, funkcja obserwująca searchInput również wywoładebounceInput
... prawda?Jeśli potrzebujesz bardzo minimalistycznego podejścia do tego, stworzyłem jedno (pierwotnie rozwidlone z porad vuejs, aby również obsługiwać IE), które jest dostępne tutaj: https://www.npmjs.com/package/v-debounce
Stosowanie:
Następnie w swoim komponencie:
źródło
W przypadku, gdy potrzebujesz zastosować dynamiczne opóźnienie z funkcją lodash
debounce
:I szablon:
UWAGA: w powyższym przykładzie zrobiłem przykład wyszukiwania, które może wywołać API z niestandardowym opóźnieniem, które jest dostępne w
props
źródło
Chociaż prawie wszystkie odpowiedzi tutaj są już poprawne, jeśli ktoś szuka szybkiego rozwiązania, mam na to dyrektywę. https://www.npmjs.com/package/vue-lazy-input
Dotyczy @input i v-model, obsługuje niestandardowe komponenty i elementy DOM, debounce i throttle.
źródło
Jeśli używasz Vue, możesz również użyć
v.model.lazy
zamiast,debounce
ale pamiętaj,v.model.lazy
że nie zawsze będzie działać, ponieważ Vue ogranicza go do niestandardowych komponentów.W przypadku komponentów niestandardowych należy używać
:value
razem z@change.native
<b-input :value="data" @change.native="data = $event.target.value" ></b-input>
źródło
Gdybyś mógł przenieść wykonywanie funkcji debounce do jakiejś metody klasowej, mógłbyś użyć dekoratora z biblioteki utils-decorators lib (
npm install --save utils-decorators
):źródło
Możemy to zrobić używając kilku linijek kodu JS:
Proste rozwiązanie! Działa idealnie! Mam nadzieję, że będzie pomocny dla was.
źródło
dekorator vue-property
źródło