Vue-Multiselect 和 Laravel 5.3 选项显示为 JSON 元素

Question

我有一个 Laravel 5.3 应用程序并使用 vue-multiselect（版本 2.0.0-beta13）来显示 multiple 选择。选择的选项是通过对给定路由的 AJAX GET 调用获取的（为便于阅读而缩短）。

[
    {
        "address1": "-",
        "address2": "-",
        "city": "-",
        "company": "-",
        "id": 0
    },
    {
        "address1": "Adresse 1 und so",
        "address2": "",
        "city": "Wien",
        "company": "Abernathy company",   
        "id": 27
    }
]

这似乎是有效的 json，当使用 Chrome 的网络选项卡进行检查时，一切似乎都很好。

我的 Vue 组件中有这段代码：

<multiselect
    v-model="companyIDs"
    :allow-empty="true" 
    :value="selected"
    :multiple="true"
    :close-on-select="false"
    :label="company"
    :track-by="id"
    :options="companies"
>
</multiselect>

这是选项 (companies) 如何在选择中显示的屏幕截图：

这里有什么问题？

Answer 1

您只需要从您的代码中删除两个:，以下应该可以工作：

<multiselect
    v-model="companyIDs"
    :allow-empty="true" 
    :value="selected"
    :multiple="true"
    :close-on-select="false"
    label="company"
    track-by="id"
    :options="companies"
>

当您在属性前添加: 时：即shortcut 用于v-bind 并且vue 开始期望它作为vue data 变量而不是简单的字符串。看起来您希望它是纯字符串而不是 vue 变量。所以这就是错误的根本原因。

Answer 2

我假设options 是作为 API 响应接收的整个对象数组。如果您只想显示公司名称，则必须在将它们用作值之前选择它们。但这很麻烦，而且可能感觉像是 hack，幸运的是，Vue-Multiselect 作者已经想到了这一点，因此他们添加了使用对象数组的功能 (documentation)。这两个选项是label 和track-by。您所做的是使用:track-by 和:label，这不是同一件事，因此图书馆无法识别。

再一次，因为您还没有解释到底要显示什么，我假设您只想为列表中的每个对象显示object[i].company。在这种情况下，您可以将label="company" 和track-by="id" 添加到组件标记中。

如果您对要显示为 UI 选项的内容有更复杂的逻辑，则必须将作为 API 响应接收的对象数组映射到要向用户显示的字符串数组。