使用 vue-multiselect 作为 Laravel 的输入字段

我需要在表单中选择多个用户。所以我选择了一个名为的 vue 组件vue-多选 https://vue-multiselect.js.org/。但我不知道如何接收所选用户的 id$request array.

这就是我使用该组件的方式：

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

我正在绑定options到一个名为的对象数组users并且所选用户被推送到selected prop.

The getUsers方法执行 axios ajax 调用来获取所有用户users array.

我尝试在表单中插入一个隐藏的输入字段，并将其 v 建模为所选的 prop：

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

但是当提交表单并且我在 Laravel 控制器中添加了请求数组时：

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

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

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

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

<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;
            }
        },

当您发送请求时，您将看到：

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

祝你好运