Tengo que mostrar dos menús desplegables diferentes en mi entrada. Lo estoy haciendo al tener un método shouldShowWarningBox al que se llama cada vez que el usuario actualiza la entrada y actualiza el valor de showWarningBox. El punto es que, cuando escribo demasiado rápido, recibo un falso que muestra el mensaje de advertencia, pero no es cierto. Si escribo lentamente, se representa el primer div.
Lo he intentado con y sin la función de rebote, pero el comportamiento es el mismo, solo que con un poco de retraso.
¿Algunas ideas?
.html
<div v-if="!showWarningBox"> //dropbox </div> <div v-if="showWarningBox"> //warning message </div>.js
data () { return { showWarningBox: false, } }, methods: { onInput (value) { this.debounce(this.shouldShowWarningBox(), 1000) }, shouldShowWarningBox () { //conditional that changes showWarningBox }, debounce (func, delay) { let id return (...args) => { if (id) clearTimeout(id) id = setTimeout(() => { func(...args) }, delay) } }, }debounce devuelve una función "rebotada". Debe guardar esa función en una propiedad de componente y llamar a esa función rebotada en la entrada:
data(){ let debouncedFn = this.debounce(this.shouldShowWarningBox, 1000) return { debouncedInput: debouncedFn } }, methods: { onInput (value) { this.debouncedInput() }, //... }