Vue-select: Cant select 2 options with them same name

[sshNkt]

Hello everyone , i have options (Companies) with the same name ex Adidas ,but with different id and i need to select both, because first company is Adidas Germany and second is Adidas France how can i do this?
this is my code :
label="name"
v-model="selectedCompany"
:filterable="true"
:options="companies"
@search="onSearch">

[sagalbot]

Are the labels the exact same? How does the user know which to pick?

[Basuregamiolive]

@sagalbot there might be situation where label name can be same and the object might be differentiate from the slug or other unique identifier . How can we handle in such context.

[m-maharjan]

I have the same situation. The label is same but only id is different? Is there any way to handle this?

[ghost]

Using the slot templates to create rich options to pick from, and differentiate between same "labels" for me for example when it comes to gender specific products and don't want to have the name being generated with gender attached but rather having a icon in front of the option.

[michaelklopf]

According to the documentation you need to set the label to the id. But you need to use the slot templates, which is what you are doing here probably anyway.

https://vue-select.org/api/props.html#label

label
Tells vue-select what key to use when generating option labels when each option is an object.

<v-select
multiple
label="id"
v-model="selectedCompany"
:filterable="true"
:options="companies"
@search="onSearch"
>

[boycce]

@michaelklopf label="id" (or in my case label="value") switches the labels which is undesirable. I would like to display the same duplicated label names.

[
  { label: "Adidas", value: "0" }, 
  { label: "Adidas", value: "1" }
]

[firefish5000]

Seems related to bug #80
Even with custom slots, changing the label to id is undesirable since it changes how search works. Typing Cats isn't going to show the entry {name: 'cats', id:2} if label="id". I missed any documentation for overriding search, but I'll admit I just started looking.

Code isn't very readable, but an example use case: https://codepen.io/firefish5000/full/mdyVrao

In my case, I am using a v-select multiple to add to user created lists by name. I created 2 'Cats' lists and attempted to select both. In blue is the number of items in the list, makes it easy to tell these are indeed different options.
I have hacked it together in a way that it only displays non-selected options, and permits user to create a new list if no matches were found. Unfortunately, if a user creates 2 lists of the same name, attempts to select both lists will fail.
In actual site, we are debating permitting users to share lists which may increase conflict frequency.

Current workaround is to have a calculated aggregate label to ensure uniqueness while preserving search.

[nieka]

Any update on when there will be looked to the pull request fixing this issue?

[github-actions[bot]]

:tada: This issue has been resolved in version 3.7.1 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: