Vue-select: Display of the selected value is wrong

[rafalolszewski94]

Describe the bug
Display of the selected value is wrong, should be All cause label is capitalized, but instead it takes value and displays it. See the sandbox below.

To Reproduce
https://codesandbox.io/s/reverent-hill-9fq34?fontsize=14&hidenavigation=1&theme=dark

[rafalolszewski94]

It kind of relates to this issue too;
when you select a value it selects whole option object, not value only (which should be)

[andreasvirkus]

You need to use the reduce prop to derive only the value from the option's object.
You also don't need the slot to override the option, you can instead use the label prop to tell vue-select what property to use from an option as the display value:

<v-select
  v-model="filtering.type"
  label="label"
  :reduce="opt => opt.value"
  :options="[
    { label: 'All', value: 'all' },
    { label: 'Movie', value: 'movie' },
    { label: 'TV', value: 'tv' }
  ]"
/>

Now it displays the option object's label property (so you''ll get a Title-cased label) and your selected value is a string, not the whole object. Hope this helps!

Here's the updated repl: https://codesandbox.io/s/relaxed-feistel-rs7v3

[sagalbot]

https://vue-select.org/guide/values.html#transforming-selections

Thanks for fielding the issue @andreasvirkus!