Managing debounce functionality for input fields in Vue is usually straightforward. However, I am facing a challenge when it comes to making the debounce wait time configurable on a per-field basis.
Each of my input fields is associated with an object structured like this:
filters: [
{
title: 'Foo',
value: null,
debounce: 1200
},
{
title: 'Bar',
value: null,
debounce: 400
}
]
These objects are used to create the input fields as follows:
<div v-for="filter in filters">
<input type="text" @input="debounceInput($event, filter)" :value="filter.value">
<span>{{ filter.value }}</span>
</div>
In order to implement debounce functionality, I am utilizing the Lodash debounce method within the following method:
methods: {
debounceInput: _.debounce((event, filter) => {
filter.value = event.target.value;
}, 500)
}
However, my goal is to make the debounce wait time configurable based on the value stored in the filter object. Despite attempting various approaches, such as wrapping the _.debounce call in an anonymous function or using bind and call, I have been unable to access the debounce time configured at the field level.
If you would like to explore the code further, you can do so through the JSFiddle link provided: https://jsfiddle.net/thebluenile/ma6nvqzh/
Is there a solution to this configuration challenge within the debounce functionality?