CODEWITHSUNDEEP
vue.jsvuejs2vue-multiselect
Imperatura
Imperatura

Reputation: 143

Vue-Multi-Select getting the array of data

Hello I am making a multi-select in Vue and my problem is I don't get the exact data from the selected items

Here is my 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>

when I try to select an Item in the selection, right in the <pre> I'm able to see the selected Item ID but when I try to console.log(itemValue) it will not show anything but if I will select another item, there must 2 selected items now which is being shown in <pre> but in my console.log(itemValue) it will just show the first selected Item.

Does anyone know how can I get the exact selected items so I can able to search using this kind of filter because basically, I will use this as a search filter.

THANK YOU!

Upvotes: 1

Views: 1436

Answers (1)

Ben Croughs
Ben Croughs

Reputation: 2644

see this codesandbox for a working sample: https://codesandbox.io/s/1yml74p9xj

there were some issue's in your code, but you can see the sample how to get it working. 3 files to look at:

  • App.vue (were the multi select is added to vue globally)
  • index.html (import of css for style)
  • HelloWorld.vue (for the code)

in my sample, the selectedItems contains the items that were selected/unselected from the vue multi select

Upvotes: 1

Related Questions