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>
As indicated in comments, you used an object element in
contact.outlets[]
for the initial value of the select. However, thea-select
'svalue
properties are bound to each element'sid
, so no match is found:Solution
Instead of the object as initial value, use the object's
id
.Composition API
demo 1
Options API
demo 2