Using Vue-multiselect As An Input Field With Laravel

I need to select multiple users in a form. So I picked a vue component called vue-multiselect. But I do not know how can I receive the selected user's ids in the $request array. Th

Solution 1:

You need to use computed field for your solution, example:

<multiselect
   v-model="selected"
   :options="users"
   :multiple="true"
   track-by="id"
   @open="getUsers"
   :custom-label="customLabel"
   >
</multiselect>
<inputtype="hidden" name="users" :value="selectedUsers">

and for example computed field:

computed: {
            selectedUsers: function () {
                let selectedUsers = [];
                this.selected.forEach((item) => {
                    selectedUsers.push(item.id);
                });
                return selectedUsers;
            }
        },

When you send your request you will see:

'users' => string'114,159' (length=7)

Good luck

Solution 2:

I assume the data users is an array of objects like this

letusers = [
{id: 1, name: "john"},
{id: 2, name: "steve"}
];

Then this fixes your problem:

<multiselectv-model="user"name="userid":options="types.map(type => type.id)":custom-label="opt => types.find(x => x.id == opt).name"></multiselect>

The idea of this fix is, that the options property of multiselect will become a normal array of id's. Then v-model is a normal attribute and will be submitted normaly. The :custom-label will iterate for each select item through your userlist. So this is only a good idea if you have a selection with less then 100 entries I guess.

Its actually still in debate how this should be done at https://github.com/shentao/vue-multiselect/issues/432.

However, it seems the best solution is, that the options property should not be a list of objects. This implies that trackBy should also not be used.