Vue-select: Template 'selected-option' changed option object

[erikverbeek]

In the update to 2.5.0 the structure of the option object that gets passed into the selected-option template changed.

I have a list of languages:

[
  { value: 'en', label: 'English'}, 
  ..etc.
]

And the following templates:

<template slot="selected-option" slot-scope="option">
  <img class='flag' :src="'/images/flags/' + option.label + '.png'">
  {{ option.label }}
</template>
<template slot="option" slot-scope="option">
  <img class='flag' :src="'/images/flags/' + option.value + '.png'">
  {{ option.label }}
</template>

In 2.4.0 both of these templates would receive { value: 'en', label: 'English'} as the option object and I could use the same template for both slots.

Now in 2.5.0 the selected-option template receives {label: 'en'}. Switching around the meaning of label and value and then losing the label all together.

[sagalbot]

Thanks for reporting, sorry for the breaking change. Will get that back to the old behavior.

[bribar]

I noticed another issue...

my options = {name: '', image: '', value: ''}

slot="option" has all three present
slot="selected-option" only has name & value present

Shouldn't all three be present in selected-option?

[bribar]

@sagalbot also when passing in options as an array of objects the multiple select does't track whats selected, therefore in the dropdown only one will be highlighted and you can add duplicates

Doesn't work with multiple example

options = [ {label: 'USA', value: 'usa'}, {label: 'Canada', value: 'canada'}, {label: 'Europe', value: 'europe'} ]

Does work with multiple example

options = ['USA', 'Canada', 'Europe']

Check this codepen https://codepen.io/sagalbot/pen/NXBwYG
adding multiple to the v-select acts the same way I'm explaining

[bribar]

Sorry you got this covered

https://github.com/sagalbot/vue-select/issues/630

[Aukhan]

@erikverbeek I've spent some time testing this out with 2.5.1 and I have not been able to reproduce the issue, the options object is being passed as is without any mutation. Please verify with 2.5.1 or provide a reproducible repo so we can resolve this one asap. Thanks

[erikverbeek]

@Aukhan I have tested the bug in 2.5.1 and it still exists.
It seems to do with having :index="'value'" set on the <v-select>.

I made a codepen showing the bug. As soon as you remove the index attribute, it behaves again as expected.

[Aukhan]

@erikverbeek thanks, that was helpful
@sagalbot working on this one

[Aukhan]

@sagalbot please have a look at #660 and let me know if it's a start, thanks

[phoenixdev-kl]

Is there someone who can review/accept @Aukhan changes? Or are there any news on when this issue can get fixed? Can I help somehow?

[oscarjlep]

I'm also waiting for this issue to be resolved, as currently I'm unable to use label as an object within template. Strangely enough I'm not using :index , but problem persists.

<v-select v-model="row.costCenterId" label="name" :filterable="true" :options="costCenters" @input="setValue" >

removing label-attribute didn't fix this issue.

[sagalbot]

In v3, option is passed through a normalizer function before being bound to the slot.

https://github.com/sagalbot/vue-select/blob/7b70b966ff1904a053e38d55d231c3ddbcc0a752/src/components/Select.vue#L682-L690