使用Vue-Multiselect作为Laravel的输入字段 [英] Using vue-multiselect as an input field with laravel

问题描述

我需要在一个表单中选择多个用户.因此，我选择了一个名为 vue-multiselect 的vue组件.但是我不知道如何在 $ request 数组中接收所选用户的ID.

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>

我将 options 绑定到称为 users 的对象数组，然后将选定的用户推送到 selected 道具.

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

getUsers 方法执行axios ajax调用，以将所有用户获取到 users 数组.

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

我试图在表单中插入一个隐藏的输入字段，并对其进行v-建模，使其与选定的道具:

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">

但是当表单提交后，我在Laravel控制器中添加了请求数组:

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

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

request('users')包含值: [object Object] ，这绝对不是我期望的.

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

如何获取所有选定用户的ID?

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

推荐答案

您需要使用计算字段作为解决方案，例如:

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">

，例如计算字段:

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)

祝你好运

这篇关于使用Vue-Multiselect作为Laravel的输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！