Ant Design Vue Select 显示现有项目

发布于 2025-01-14 22:36:45 字数 876 浏览 3 评论 0原文

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

这是视图中的元素：

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

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我最亲爱的 2025-01-21 22:36:45

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

<a-select-option

        v-for="outlet in outlets"

        :key="outlet.name"

        :value="outlet.id"

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

回复收藏 0 原文

~没有更多了~