使用 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绑定到一个名为users的对象数组，然后将选定的用户推送到selected道具。

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

我尝试在表单中插入一个隐藏的输入字段，并将其 v-modeled 到选定的道具：

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

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

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)

祝你好运

Answer 2

我假设数据users是这样的对象数组

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

然后这可以解决您的问题：

<multiselect 
  v-model="user" 
  name="userid"
  :options="types.map(type => type.id)" 
  :custom-label="opt => types.find(x => x.id == opt).name">
</multiselect>

这个修复的想法是，多options属性将成为一个普通的 id 数组。 那么v-model是一个普通属性，会正常提交。 :custom-label将通过您的用户列表为每个选择的项目迭代。 因此，如果您选择的条目少于 100 个，我猜这只是一个好主意。

它实际上仍在争论如何在https://github.com/shentao/vue-multiselect/issues/432上完成。

但是，似乎最好的解决方案是options属性不应是对象列表。 这意味着trackBy应该使用trackBy 。