J'ai une boîte de saisie simple dans un modèle Vue et je voudrais utiliser un debounce plus ou moins comme ceci:
<input type="text" v-model="filterKey" debounce="500">
Cependant, la debounce
propriété est obsolète dans Vue 2 . La recommandation dit seulement: "utiliser v-on: entrée + fonction anti-rebond tierce".
Comment le mettez-vous correctement en œuvre?
J'ai essayé de l'implémenter en utilisant lodash , v-on: input et v-model , mais je me demande s'il est possible de se passer de la variable supplémentaire.
Dans le modèle:
<input type="text" v-on:input="debounceInput" v-model="searchInput">
Dans le script:
data: function () {
return {
searchInput: '',
filterKey: ''
}
},
methods: {
debounceInput: _.debounce(function () {
this.filterKey = this.searchInput;
}, 500)
}
La clé de filtre est ensuite utilisée plus tard dans les computed
accessoires.
vue.js
vuejs2
debouncing
MartinTeeVarga
la source
la source
Réponses:
J'utilise le package debounce NPM et implémenté comme ceci:
En utilisant lodash et l'exemple de la question, l'implémentation ressemble à ceci:
la source
v-model=your_input_variable
à l'entrée et à votre vuedata
. Donc, vous ne comptez pas sur,e.target
mais utilisez Vue pour pouvoir accéder à lathis.your_input_variable
place dee.target.value
this
à la fonction.L'attribution d'un anti-rebond
methods
peut poser problème. Donc au lieu de ça:Vous pouvez essayer:
Cela devient un problème si vous avez plusieurs instances d'un composant - de la même manière que
data
devrait être une fonction qui renvoie un objet. Chaque instance a besoin de sa propre fonction anti-rebond si elle est censée agir indépendamment.Voici un exemple du problème:
la source
data()
alors.mis à jour en 2020
Option 1: réutilisable, pas de profondeur
(Recommandé si nécessaire plus d'une fois dans votre projet)
helpers.js
Component.vue
Codepen
Option 2: dans le composant, pas de déps
(Recommandé si vous utilisez une fois ou dans un petit projet)
Component.vue
Codepen
la source
Très simple sans lodash
la source
destroyed() { clearInterval(this.timeout) }
afin de ne pas avoir de délai d'attente après la destruction.J'ai eu le même problème et voici une solution qui fonctionne sans plugins.
Depuis
<input v-model="xxxx">
est exactement le même que(la source)
J'ai pensé que je pourrais définir une fonction anti-rebond sur l'attribution de xxxx dans
xxxx = $event.target.value
comme ça
méthodes:
la source
@input="update_something"
action, appelez-le aprèsthat.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); },
Sur la base des commentaires et du document de migration lié , j'ai apporté quelques modifications au code:
Dans le modèle:
Dans le script:
Et la méthode qui définit la clé de filtre reste la même:
On dirait qu'il y a un appel de moins (juste le
v-model
, et pas lev-on:input
).la source
debounceInput()
deux fois pour chaque changement?v-on:
détectera les changements d'entrée et appellera le debounce, ET parce que le modèle est lié, la fonction de surveillance de searchInput appellera AUSSIdebounceInput
... non?Si vous avez besoin d'une approche très minimaliste à ce sujet, j'en ai fait une (à l'origine dérivée de vuejs-tips pour également prendre en charge IE) qui est disponible ici: https://www.npmjs.com/package/v-debounce
Usage:
Puis dans votre composant:
la source
Au cas où vous auriez besoin d'appliquer un délai dynamique avec la
debounce
fonction du lodash :Et le modèle:
REMARQUE: dans l'exemple ci-dessus, j'ai fait un exemple d'entrée de recherche qui peut appeler l'API avec un délai personnalisé qui est fourni dans
props
la source
Bien que pratiquement toutes les réponses ici soient déjà correctes, si quelqu'un est à la recherche d'une solution rapide, j'ai une directive à ce sujet. https://www.npmjs.com/package/vue-lazy-input
Il s'applique à @input et v-model, prend en charge les composants personnalisés et les éléments DOM, anti-rebond et accélérateur.
la source
Si vous utilisez Vue, vous pouvez également utiliser à la
v.model.lazy
place de,debounce
mais rappelezv.model.lazy
- vous que cela ne fonctionnera pas toujours car Vue le limite pour les composants personnalisés.Pour les composants personnalisés, vous devez utiliser
:value
avec@change.native
<b-input :value="data" @change.native="data = $event.target.value" ></b-input>
la source
Si vous pouviez déplacer l'exécution de la fonction anti-rebond dans une méthode de classe, vous pourriez utiliser un décorateur de utils-decorators lib (
npm install --save utils-decorators
):la source
Nous pouvons faire avec en utilisant quelques lignes de code JS:
Solution simple! Travaillez parfaitement! Hope, sera utile pour vous les gars.
la source
vue-propriété-décorateur
la source