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

Question

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

这就是我使用组件的方式:

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

我将 options 绑定(bind)到一个名为 users 的对象数组，并且选定的用户被推送到 selected prop。

getUsers 方法执行 axios ajax 调用以将所有用户提取到 users 数组。

我试图在表单中插入一个隐藏的输入字段并将其 v 建模到选定的 Prop :

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

但是当提交表单并且我在我的 Laravel Controller 中添加请求数组时:

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

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

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

Answer 1

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

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

祝你好运