Vue-Multi-Select получает массив данных - PullRequest
0 голосов
/ 30 октября 2018

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

Вот мой код

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

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

СПАСИБО!

1 Ответ

0 голосов
/ 30 октября 2018

см. Этот код и коробку для рабочего образца: https://codesandbox.io/s/1yml74p9xj

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

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

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

...