【发布时间】:2023-03-07 21:21:01
【问题描述】:
我正在使用 buefy 的 b-taginput 和 lodash 的 debounce 方法在 @typing 事件期间从 api 源获取数据。问题是当我在输入字段中按空格键时,在 debounce 方法中输入字符未被识别为实际字符。
<b-field label="Roles">
<b-taginput
:value="this.objectData.roles"
:data="filteredTags"
autocomplete
field="role"
icon="label"
placeholder="add role..."
@focus="getAsyncRole"
@typing="getAsyncRole"
@input="(newValue) => {updateValue(newValue, 'roles')}"
>
<template slot-scope="props">
<p>{{props.option.role}}</p>
</template>
<template slot="empty">There are no items</template>
</b-taginput>
</b-field>
getAsyncRole: debounce(function(name) {
console.log('inside getAsyncRole and name.length is '+name.length) // the length is 0 when i hit
spacebar but why?
if (!name.length) {
this.filteredTags = [];
return; //exits the function if length of input is zero
}
this.isFetching = true;
api
.getSearchData(this.sessionData.key,`/role/?filter={role} LIKE '%25${name}%25'`)
.then(response => {
console.log('response for getasync role is'+JSON.stringify(response))
this.filteredTags = [];
response.forEach(item => {
this.filteredTags.push(item);
});
})
.catch(error => {
this.filteredTags = [];
throw error;
})
.finally(() => {
this.isFetching = false;
});
}, 500),
如果我输入任何字母字符,上述代码就可以工作(即,它会根据输入字符为我提供可能的自动完成结果)。但我也希望它在我将空格键输入 b-taginput 时列出所有自动完成结果(总结果)。由于它不将空格字符识别为实际字符,name.length 变为零,然后它退出函数而不进行 api 调用。
注意:我注意到这个问题只发生在 b-taginput。在<b-autocomplete> 的情况下不会出现此问题。使用<b-autocomplete>,如果我按空格键,那么我会得到所有想要的结果。因此,我认为这个问题只针对 b-taginput。请为此提供解决方法提供帮助。
【问题讨论】: