Параметры 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 все кажется прекрасным.

У меня есть этот код в моей Вьет компоненту:

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

И это screenhsot как варианты (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 и вю начинает ожидать, что, как вю data переменные вместо простой строки. Похоже, вы хотите, чтобы это была простая строка, а не переменная vue. поэтому это основная причина ошибки.

Answer 2

Я предполагаю, что options - это весь массив объектов, полученных как ответ API. Если вы хотите показать только названия компаний, вы должны выбрать их, прежде чем использовать их в качестве значений. Но это громоздко и может показаться взломом, и, к счастью, авторы Vue-Multiselect подумали об этом, поэтому они добавили функции для использования массива объектов (documentation). Эти два варианта: label и track-by. То, что вы сделали, это использовать :track-by и :label, что не то же самое и, следовательно, не распознается библиотекой.

Опять же, поскольку вы не объяснили, что именно вы пытаетесь отобразить, я предполагаю, что вы хотите показать только object[i].company для каждого объекта в списке. В этом случае вы можете добавить label="company" и track-by="id" к разметке компонентов.

Если у вас есть более сложная логика того, что вы хотите отображать в качестве параметров пользовательского интерфейса, вам придется сопоставить массив объектов, полученных как ответ API, в массив строк, который вы хотите отобразить пользователю.