Ant Design Vue Select 显示现有项目

Question

在 Vue 中使用 Ant Design。在 Multi-select 组件中，用户可以 select 和取消 select 关联对象。但是，预先存在的关联对象的现有标记应显示 item.name，而不是显示“未定义”。它也不会在 select 框中的现有对象旁边显示复选标记。但是，在提交时，“未定义”对象被正确提交。新选项正确显示在 select 框中。

这是视图中的元素：

<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

如评论中所示，您使用 contact.outlets[] 中的对象元素作为 select 的初始值。但是，a-select 的 value 属性绑定到每个元素的 id，因此找不到匹配项：

<a-select-option
        v-for="outlet in outlets"
        :key="outlet.name"
        :value="outlet.id"  option value is an `id`
>

解决方案

不用对象作为初始值，使用对象的id.

作文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

选项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

Ant Design Vue Select 显示现有项目

Ant Design Vue Select Display Existing Items

vue.js

antd

antdv

解决方案

作文API

选项API