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

Question

我有一个 Laravel 5.3 应用程序并使用 vue-multiselect（版本 2.0.0-beta13）显示 multiple selects。 select 的选项是通过对给定路由的 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) 如何在 select 中显示的屏幕截图：

这是怎么回事？

Answer 1

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

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

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

Answer 2

您只需从您的代码中删除两个 :，以下应该有效：

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

当您在属性前添加 : 时：即 shortcut for v-bind and vue starts to expect that as vue data 变量而不是简单的字符串。看起来你希望它是纯字符串而不是 vue 变量。这就是错误的根本原因。

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

Vue-Multiselect and Laravel 5.3 options show up as JSON element

laravel

vue.js

vue-component