Vue-Multi-Select getting the array of data

Question

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!

Ben Croughs · Accepted Answer · 2018-10-30 08:22:49Z

1

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

answered Oct 30, 2018 at 8:22

Ben Croughs

2,6731 gold badge25 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Imperatura Over a year ago

i manage to make it work by changing @select to @input. When I saw the documentation that they updated it, I tried it myself and make it work. Thank you so much for your reply.

Collectives™ on Stack Overflow

Vue-Multi-Select getting the array of data

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related