I am using vue-select with the pagination and searchable options. When I click on the options without searching, the label prop (what the user sees) displays the correct text.
However, when I search, the label prop shows the value (that I am saving) instead of the specified text.
How can I make the v-select show the 'text' and not the code.value when it is being searched?
<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 }
I ended up taking out the :reduce="code => code.value" and just parsing it manually before submission.