[英]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 .
所以我选择了一个名为vue-multiselect的 vue 组件。 But I do not know how can I receive the selected user's ids in the
$request
array.但我不知道如何在
$request
数组中接收所选用户的 ID。
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.我将
options
绑定到一个名为users
的对象数组,然后将选定的用户推送到selected
道具。
The getUsers
method performs an axios ajax call to fetch all the users to the users
array. getUsers
方法执行 axios ajax 调用以将所有用户提取到users
数组。
I tried to insert a hidden input field in the form and v-modeled it to the selected prop:我尝试在表单中插入一个隐藏的输入字段,并将其 v-modeled 到选定的道具:
<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:但是当表单被提交并且我在我的 Laravel 控制器中添加了请求数组时:
dd(request()->all());
request('users')
contained the value: [object Object]
, which is definitely not what I expected. request('users')
包含值: [object Object]
,这绝对不是我所期望的。
How do I get the ID's of all the selected users?如何获取所有选定用户的 ID?
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祝你好运
I assume the data users
is an array of objects like this我假设数据
users
是这样的对象数组
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.这个修复的想法是,多
options
属性将成为一个普通的 id 数组。 Then v-model
is a normal attribute and will be submitted normaly.那么
v-model
是一个普通属性,会正常提交。 The :custom-label
will iterate for each select item through your userlist. :custom-label
将通过您的用户列表为每个选择的项目迭代。 So this is only a good idea if you have a selection with less then 100 entries I guess.因此,如果您选择的条目少于 100 个,我猜这只是一个好主意。
Its actually still in debate how this should be done at https://github.com/shentao/vue-multiselect/issues/432 .它实际上仍在争论如何在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.但是,似乎最好的解决方案是
options
属性不应是对象列表。 This implies that trackBy
should also not be used.这意味着
trackBy
应该使用trackBy
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.