Is there a way to capture the input entered during the @typing event of the b-autocomplete component in Buefy?
During the @typing event, the debounce method is called with specific parameters as shown below-
<b-field label="Location">
<b-autocomplete
:data="dataLocation"
placeholder="select a location..."
field="id"
:loading="isFetching"
:value="this.objectData.location"
@typing="getAsyncData(`location`,`?filter= UPPER({id}) LIKE UPPER('%25${name}%25') OR UPPER({description}) LIKE UPPER('%25${name}%25')`)"
@input="(newValue) => {updateValue(newValue,'location')}"
>
<template slot-scope="props">
<div class="container">
<p>
<b>ID:</b>
{{props.option.id}}
</p>
<p>
<b>Description:</b>
{{props.option.description}}
</p>
</div>
</template>
<template slot="empty">No results found</template>
</b-autocomplete>
</b-field>
Debounce function example
getAsyncData: debounce(function(name, entity, queryparam) {
console.log('event.target'+event.target)
console.log('name is' + name)
console.log('entity is' + entity)
console.log('queryparam is' + queryparam)
if (!name.length) {
this.data = [];
return;
}
this.isFetching = true;
api
.getSearchData(this.sessionData.key,`/${entity}/${queryparam} `)
.then(response => {
this.data = [];
response.forEach(item => {
this.data.push(item);
});
})
.catch(error => {
this.data = [];
throw error;
})
.finally(() => {
this.isFetching = false;
});
}, 500),
The issue mentioned in the code snippet above is related to passing parameters to the debounce function. While it works without any parameters, making the function generic requires explicit parameter passing. Any suggestions on how to address this would be greatly appreciated.