<MultiSelect> v-model doesn't work properly with object

[Vincent]

Hello, 


I'm trying to use <MultiSelect> to v-model a property on an object, however this doesn't work fully as the dropdownlist doesn't pre-select the values, allowing the user to pick the same option twice. 

See:

H2w74h (forked) - StackBlitz

Repro steps:

1: Open dropdownlist, see that 'Baseball' is not pre selected and highlighted in blue
2: Click on 'Baseball' again, Baseball is now selected twice
3: Open dropdownlist again and see that 'Baseball' is selected and highlighted in blue
4: Remove the last 'Baseball' chip (the one on the right).
5: Open dropdownlist again and see that 'Baseball' is not highlighted blue anymore

[Vincent]

Is this perhaps a case where the object is internally compared by identity rather than it's ID property?

[Petar]

Hello, Vincent. 

Thank you for the detailed explanation of the experienced issue. To make the discussed scenario work correctly, we need to use the valueField property of the MultiSelect component.

With the above property, the definition of the MultiSelect should look like this:

<multiselect
  :style="{ width: '300px' }"
  :data-items="sports"
  :text-field="'name'"
  :data-item-key="'id'"
  :value-field="'id'"
  v-model="value.realValue"
></multiselect>

Here is a modified version of the StackBlitz example that you sent us in which the above definition is used. 

I hope the above details will help you achieve what you need in your application.

[Vincent]

Ahhh, thanks 😅. I guess I was just stuck on the old multiselect wrapper way of thinking and made this mistake. 

Thanks for your help