Ich habe ein einfaches Eingabefeld in einer Vue-Vorlage und möchte Debounce mehr oder weniger so verwenden:
<input type="text" v-model="filterKey" debounce="500">
Die debounce
Immobilie wurde jedoch in Vue 2 veraltet . Die Empfehlung lautet nur: "Verwenden Sie v-on: Eingabe + Entprellungsfunktion eines Drittanbieters".
Wie setzen Sie es richtig um?
Ich habe versucht, es mit lodash , v-on: input und v-model zu implementieren , aber ich frage mich, ob es möglich ist, auf die zusätzliche Variable zu verzichten.
In Vorlage:
<input type="text" v-on:input="debounceInput" v-model="searchInput">
Im Skript:
data: function () {
return {
searchInput: '',
filterKey: ''
}
},
methods: {
debounceInput: _.debounce(function () {
this.filterKey = this.searchInput;
}, 500)
}
Der Filterschlüssel wird später in computed
Requisiten verwendet.
vue.js
vuejs2
debouncing
MartinTeeVarga
quelle
quelle
Antworten:
Ich verwende das Debounce- NPM-Paket und implementiere es wie folgt :
Mit lodash und dem Beispiel in der Frage sieht die Implementierung folgendermaßen aus:
quelle
v-model=your_input_variable
zum Eingang und in Ihrem Vue hinzuzufügendata
. So Sie verlassen sich auf nichte.target
aber Vue verwenden , so dass Sie zugreifen können ,this.your_input_variable
anstatte.target.value
this
innerhalb der Funktion nicht darauf zugreifen .Das Zuweisen von Entprellen
methods
kann problematisch sein. Also stattdessen:Sie können versuchen:
Es wird zu einem Problem, wenn Sie mehrere Instanzen einer Komponente haben - ähnlich wie
data
eine Funktion, die ein Objekt zurückgibt. Jede Instanz benötigt eine eigene Entprellfunktion, wenn sie unabhängig agieren soll.Hier ist ein Beispiel für das Problem:
quelle
data()
dann hinzu.aktualisiert im Jahr 2020
Option 1: Wiederverwendbar, keine Deps
(Empfohlen bei Bedarf mehr als einmal in Ihrem Projekt)
helpers.js
Component.vue
Codepen
Option 2: In-Component, keine Deps
(Empfohlen bei einmaliger Verwendung oder in kleinen Projekten)
Component.vue
Codepen
quelle
Sehr einfach ohne lodash
quelle
destroyed() { clearInterval(this.timeout) }
um nach der Zerstörung keine Zeitüberschreitung zu haben.Ich hatte das gleiche Problem und hier ist eine Lösung, die ohne Plugins funktioniert.
Da
<input v-model="xxxx">
ist genau das gleiche wie(Quelle)
Ich dachte, ich könnte eine Entprellungsfunktion für die Zuweisung von xxxx in einstellen
xxxx = $event.target.value
so was
Methoden:
quelle
@input="update_something"
Aktion hatte, rufen Sie diese nachthat.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); },
Basierend auf Kommentaren und dem verknüpften Migrationsdokument habe ich einige Änderungen am Code vorgenommen:
In Vorlage:
Im Skript:
Die Methode zum Festlegen des Filterschlüssels bleibt unverändert:
Es sieht so aus, als gäbe es einen Anruf weniger (nur den
v-model
und nicht denv-on:input
).quelle
debounceInput()
zweimal für jede Änderung aufgerufen werden?v-on:
erkennt die Eingabeänderungen und ruft das Entprellen auf, UND da das Modell gebunden ist, ruft die Überwachungsfunktion von searchInput AUCH aufdebounceInput
... richtig?Wenn Sie einen sehr minimalistischen Ansatz benötigen, habe ich einen erstellt (ursprünglich aus vuejs-tips gegabelt, um auch den IE zu unterstützen), der hier verfügbar ist: https://www.npmjs.com/package/v-debounce
Verwendung:
Dann in Ihrer Komponente:
quelle
Falls Sie eine dynamische Verzögerung mit der
debounce
Funktion des lodash anwenden müssen:Und die Vorlage:
HINWEIS: Im obigen Beispiel habe ich ein Beispiel für eine Sucheingabe erstellt, mit der die API mit einer benutzerdefinierten Verzögerung aufgerufen werden kann, die in bereitgestellt wird
props
quelle
Obwohl so ziemlich alle Antworten hier bereits richtig sind, habe ich eine Richtlinie dafür, wenn jemand auf der Suche nach einer schnellen Lösung ist. https://www.npmjs.com/package/vue-lazy-input
Es gilt für @input und v-model, unterstützt benutzerdefinierte Komponenten und DOM-Elemente, entprellen und drosseln.
quelle
Wenn Sie Vue verwenden, können Sie auch
v.model.lazy
anstelle von verwenden,debounce
aber denken Sie daran,v.model.lazy
dass dies nicht immer funktioniert, da Vue es für benutzerdefinierte Komponenten einschränkt.Für benutzerdefinierte Komponenten sollten Sie
:value
zusammen mit verwenden@change.native
<b-input :value="data" @change.native="data = $event.target.value" ></b-input>
quelle
Wenn Sie die Ausführung der Entprellungsfunktion in eine Klassenmethode verschieben könnten, könnten Sie einen Dekorator aus den utils-decorators lib (
npm install --save utils-decorators
) verwenden:quelle
Wir können mit wenigen Zeilen JS-Code umgehen:
Einfache Lösung! Perfekt arbeiten! Hoffe, wird für euch hilfreich sein.
quelle
vue-property-decorator
quelle