Using vue-multiselect as an input field with laravel

Question

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.

This is how I am using the component:

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

I am binding the options to an array of objects called users and the selected user gets pushed to the selected prop.

The getUsers method performs an axios ajax call to fetch all the users to the users array.

I tried to insert a hidden input field in the form and v-modeled it to the selected prop:

<input type="hidden" name="users" v-model="selected">

But when the form was submitted and I dd'd the request array in my Laravel controller:

dd(request()->all());

request('users') contained the value: [object Object], which is definitely not what I expected.

How do I get the ID's of all the selected users?

@PassionInfinite Using name attribute doesn't solve the problem. It gives null when the request array is dumped. — Tanmay
– Tanmay, Commented May 9, 2018 at 4:24

Sintsov Roman · Accepted Answer · 2019-03-20 10:10:35Z

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>
<input type="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

answered Mar 20, 2019 at 10:10

Sintsov Roman

214 bronze badges

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

Comments

Adam · Accepted Answer · 2020-05-26 21:41:35Z

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

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

Then this fixes your problem:

<multiselect 
  v-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.

Collectives™ on Stack Overflow

Using vue-multiselect as an input field with laravel

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related