Vue-multiselect: How to get selected values to process in backend?

[nezaboravi]

Seems i cant find a way to grab what values from multiselect has been selected to pass with the form to backend. Is there any documentation i can read about it? I went thru docs a few times, but could not find the solution

[nikolaynesov]

@nezaboravi http://monterail.github.io/vue-multiselect/#sub-getting-started

So, from Basic usage example from docs, you need value from component data. This is what has been selected from options and is null by default.

Hopefully, it will help if I understood you correctly.

[nezaboravi]

Hi @nikolaynesov
So i did like this:
<multiselect v-model="value" @input='updateSelected' :options="options" :multiple="true" :close-on-select="false" :clear-on-select="false" :hide-selected="true" placeholder="Pick tags" label="name" track-by="id"></multiselect>

<input name="tags_selected" id="tags_selected" value="" type="hidden">

And in compnent:

methods: { updateSelected: function() { this.value.map((index)=>{ this.tags_selected.push(index.id) }) document.getElementById('tags_selected').value = this.clean(this.tags_selected); }, clean: (arr) => { let tmp = []; for(var i = 0; i < arr.length; i++){ if(tmp.indexOf(arr[i]) == -1){ tmp.push(arr[i]); } } return tmp } },
Sorry, cant format it :(

Then later in my PHP side i had to explode(',', $tags_selected ) and insert in DB

Do you see better approach?
Thanks
Vladimir

[OyvindAndersson]

I'm guessing he means that no form-input data is sent with the request by default. I wondered about the same thing..

Perhaps there are better ways, but this worked nicely for me. No need to intercept the data, just use the array/value that the multiselect is modeling in a normal selectbox that is not displayed.

<multiselect v-model="selectedUsers" :options="users" :multiple="true" ...></multiselect>

<select name="users[]" style="display:none;" multiple>
     <option v-for="user in selectedUsers" :value="user.id" selected="selected"></option>
</select>

[nezaboravi]

quite simpler, yes. Thank you

[jamesfairhurst]

Instead of the extra hidden select I used the following which is just a little cleaner:

<input type="hidden" name="users[]" v-for="user in selectedUsers" :value="user.id">

[shentao]

I would say that @jamesfairhurst solution is the recommended one. Thank you.

[emilv]

I don't really like the workaround. Would anyone else be interested in a PR where we add these hidden fields automatically if a name prop is provided?

[antonioftamura]

WORKED LIKE A CHARM!!

[agalya043]

I Need to show the label,but the value should be saved as code,What i need to do?
<multiselect :options="[{label: 'Canada', code: 'ca'}]"><multiselect>