如何使用 Buefy 自动完成绑定 id 值但显示名称值？答案

【问题标题】：How to bind id value but display name value using Buefy Autocomplete?如何使用 Buefy 自动完成绑定 id 值但显示名称值？
【发布时间】：2019-05-01 21:38:33
【问题描述】：

我正在尝试将Buefy Autocomplete 集成到我的网站中。我的数据是一个对象数组，每个对象都包含一个整数 ID 和一个字符串名称。像这样

countries : [
    {
        id: 1
        name : 'Country 1',
    },
    {
        id: 2
        name : 'Country 2',
    },
]

正如文档所说，field 属性用于显示为选定值并返回相同的值

我想使用name 属性作为显示文本，但id 作为选定选项。

另外，当我从 API 获得结果时，我得到国家 id，我想根据 id 设置值

这里是示例fiddle

任何帮助将不胜感激。

【问题讨论】：

标签： vue.js autocomplete vue-component vuex buefy

【解决方案1】：

当您从“自动完成”下拉列表中选择建议时，它不仅会选择 id 或 name，还会选择整个对象 {...}。

所以一旦你选择了它，你应该能够从那里选择你想使用的字段，在你的情况下，id。

在其中一个示例的 Codepen 中，您可以看到选择了整个对象 - https://codepen.io/pen?&editable=true&editors=101

你确定你只得到id而不是整个对象吗？

【讨论】：