I need to display two different dropdowns in my input field. To achieve this, I am using a method called shouldShowWarningBox that gets triggered every time the user updates the input and updates the value of showWarningBox accordingly. However, when I type too quickly, I get a false warning message displayed, which is not accurate. If I type slowly, the first dropdown is rendered correctly.
I have experimented with both including and excluding the debounce function, but the behavior remains the same, just with a slight delay.
Any suggestions?
.html
<div v-if="!showWarningBox">
// First dropdown content
</div>
<div v-if="showWarningBox">
// Warning message content
</div>
.js
data () {
return {
showWarningBox: false,
}
},
methods: {
onInput (value) {
this.debounce(this.shouldShowWarningBox(), 1000)
},
shouldShowWarningBox () {
// Code logic to determine showWarningBox
},
debounce (func, delay) {
let id
return (...args) => {
if (id) clearTimeout(id)
id = setTimeout(() => {
func(...args)
}, delay)
}
},
}