Ant Design Vue Select Display Existing Items - vue.js

Question

Using Ant Design in Vue. In a Multi-select component, user is able to select and unselect associated objects. However, the existing tokens of preexisting associated objects should show the item.name, but instead show "undefined". It also does not show a checkmark next to existing objects in the select box. However, on submit, the "undefined" object is submitted correctly. New choices display within the select box correctly.
Here is the element in the view:
<a-form-item :label="`${contact.name}'s Outlets`"
:wrapperCol="{lg: {span: 20}, sm: {span: 24} }">
<a-select
mode="multiple"
v-model="contact.outlets"
style="width: 100%"
placeholder="Please select"
>
<a-select-option v-for="outlet in outlets" :key="outlet.name" :value="outlet.id">
{{ outlet.name }}
</a-select-option>
</a-select>
</a-form-item>

Answer 1

As indicated in comments, you used an object element in contact.outlets[] for the initial value of the select. However, the a-select's value properties are bound to each element's id, so no match is found:
<a-select-option
v-for="outlet in outlets"
:key="outlet.name"
:value="outlet.id" 👈 option value is an `id`
>
Solution
Instead of the object as initial value, use the object's id.
Composition API
export default {
setup() {
const outlets = reactive([
{ id: 1, name: 'Outlet A' },
{ id: 2, name: 'Outlet B' },
👇
{ id: 3, name: 'Outlet C' },
]); 👇
const contact = reactive({ name: 'John', outlets: [3] });
return { outlets, contact };
}
}
demo 1
Options API
export default {
data() {
const outlets = [
{ id: 1, name: 'Outlet A' },
{ id: 2, name: 'Outlet B' },
👇
{ id: 3, name: 'Outlet C' },
]; 👇
const contact = { name: 'John', outlets: [3] };
return { outlets, contact };
}
}
demo 2