Vue-Multi-Select получает массив данных

Question

Здравствуйте, я делаю множественный выбор в Vue, и моя проблема в том, что я не могу получить точные данные из выбранных элементов

Вот мой код

<multiselect v-model="itemValue"
    :show-labels="false"
    :options="itemObj"
    :multiple="true"
    :close-on-select="false"
    :clear-on-select="false"
    :hide-selected="true"
    :preserve-search="true"
    label="itemName" track-by="itemName"
    :preselect-first="true"
    placeholder="List of Items"
    @select="selectItem($event)">
        <template slot="selection" slot-scope="itemValue"></template>
</multiselect>

<!---- TO SHOW THE CURRENT SELECTED ITEM ID --->
<pre>{{itemValue.map(a => a.id)}}</pre>

когда я пытаюсь выбрать пункт в выделении, прямо в <pre> Я могу видеть выбранный идентификатор элемента, но когда я пытаюсь console.log(itemValue) он не будет ничего показывать, но если я выберу другой элемент, теперь должно быть 2 выбранных элемента, которые отображаются в <pre> но по моему console.log(itemValue) он просто покажет первый выбранный элемент.

Кто-нибудь знает, как я могу получить точно выбранные элементы, чтобы я мог искать с помощью этого вида фильтра, потому что в основном я буду использовать его в качестве фильтра поиска.

БЛАГОДАРЮ ВАС!

Answer 1

См. этот код и коробку для рабочего примера: https://codesandbox.io/s/1yml74p9xj

в вашем коде были некоторые проблемы, но вы можете увидеть пример того, как заставить его работать. 3 файла для просмотра:

• App.vue (если мультиселектор добавлен в vue глобально)
• index.html (импорт CSS для стиля)
• HelloWorld.vue (для кода)

в моем примере selectedItems содержит элементы, которые были выбраны / не выбраны из Vue Multi Select