如何解决Vue 选择标签无法正常工作,因为它是可搜索的
我正在使用带有分页和可搜索选项的 vue-select。当我在没有搜索的情况下点击选项时,标签道具(用户看到的)会显示正确的文本。
但是,当我搜索时,标签道具会显示值(我正在保存)而不是指定的文本。
如何让 v-select 在搜索时显示“文本”而不是 code.value?
<v-select
v-model="primary_scenario_field"
:options="paginated"
:reduce="code => code.value"
label="text"
required
searchable
@search="handleVSelectSearch"
>
<li slot="list-header" class="pagination">
<b-button :disabled="!hasPrevPage"
@click="handlePaginationClick('prevIoUs')">
PrevIoUs
</b-button>
<b-button :disabled="!hasNextPage"
@click="handlePaginationClick('next')">
Next
</b-button>
</li>
</v-select>
data ()
{
search: '',offset: 0,limit: 10,filtered: [],paginated: [],code_list: []
},methods: {
handlePaginationClick (direction){
if(direction == 'next') this.offset = this.offset + 10;
if(direction == 'prevIoUs') this.offset = this.offset - 10;
this.$nextTick();
this.paginated = this.paginateResults(this.filtered);
},paginateResults (value){
return value.slice(this.offset,this.limit + this.offset);
},async handleVSelectSearch (query = ''){
query = isstring(query) ? query.trim().toupperCase() : query.toupperCase();
this.filtered = this.filterResults(query);
await this.$nextTick();
this.offset = 10;
this.handlePaginationClick('prevIoUs');
},filterResults (value){
return this.code_list.filter(item => item.text.includes(value));
},**this.code_list options are getting loaded like this (in an array):
{ text: `${response.a}: ${response.b}`,value: response.id }
解决方法
我最终取出 :reduce="code => code.value" 并在提交前手动解析它。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。