Summer Sale! All accounts are 50% off this week.
I am trying to create a combobox which has a set of names. Its for a large business, and they have multiple houses. They want it so when its displayed on a list, the user is displayed even with multiple occurrences. Sadly the value gets removed from the list, as the name is the same as one before it. Anyway to get around this?
Each employee can be member of multiple houses. See data below.
clients: [
{
header: 'Group A',
},
{
id: 1,
name: 'Jane Doe',
avatar: '',
},
{
id: 2,
name: 'Johnny Doe',
avatar: '',
},
{
divider: true,
},
{
header: 'Group B',
},
{
id: 3,
name: 'Jane Doe',
avatar: '',
},
{
id: 4,
name: 'John Dumb',
avatar: '',
},
],
A good idea, if you are populating the clients into a Vue variable from an ajax call, is to use the vue tools plugin to see that actual data that's being populated into the variable, and make sure you are passing in the "id" as well as the "name".
Then when looping through the for each part of the combo-box, make sure you are assigning the value to the "id" field.
If you post the vue portion, I'd be happy to look further.
I don't think vue filters duplicates automatically, so I'd definitely check to see if there's a filter of some kind. I did find a stack overflow where users are trying to AVOID duplicate values...sometimes I find that viewing the opposite of what I'm looking for helps too..
Heres the code
<v-combobox
autocomplete
chips
counter
deletable-chips
multiple
outline
item-text="name"
item-value="name"
max-height="auto"
v-bind:items="clients"
v-model="task_clients"
:hint="$t('pages.action.task.new.hint.users')"
:label="$t('pages.action.task.label.clients')"
>
<template slot="selection" slot-scope="data">
<v-chip
close
@input="data.parent.selectItem(data.item)"
:selected="data.selected"
class="chip--select-multi"
:key="JSON.stringify(data.item)"
>
<v-avatar>
<img :src="data.item.avatar">
</v-avatar>
{{ data.item.name }}
</v-chip>
</template>
<template slot="item" slot-scope="data">
<template v-if="typeof data.item !== 'object'">
<v-list-tile-content v-text="data.item"></v-list-tile-content>
</template>
<template v-else>
<v-list-tile-avatar>
<img v-bind:src="data.item.avatar"/>
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title v-html="data.item.name"></v-list-tile-title>
<v-list-tile-sub-title v-html="data.item.group"></v-list-tile-sub-title>
</v-list-tile-content>
</template>
</template>
</v-combobox>
Bump
Please or to participate in this conversation.