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

Question

我有一个Laravel 5.3应用程序并使用vue-multiselect（版本2.0.0-beta13）来显示multiple选项。 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）的屏幕截图：

这里有什么问题？

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响应接收的整个对象数组。如果您只想显示公司名称，则必须在将它们用作值之前选择它们。但这很麻烦，可能感觉像是黑客，幸运的是，Vue-Multiselect的作者已经想到了这一点，所以他们添加了使用对象数组的功能（documentation）。这两个选项是label和track-by。你所做的是使用:track-by和:label，这不是同一件事，因此不被图书馆识别。

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

如果你想要显示为UI选项的逻辑更复杂，那么你必须将作为API响应接收的对象数组映射到你想要显示给用户的字符串数组中。 / p>