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

【问题标题】：Using vue-multiselect as an input field with laravel使用 vue-multiselect 作为 laravel 的输入字段
【发布时间】：2018-10-18 11:51:19
【问题描述】：

我需要在一个表单中选择多个用户。所以我选择了一个叫做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？

【问题讨论】：

你的意思是一个空的对象吗？
@Eisenheim 使用 name 属性在请求中获取它。
@PassionInfinite 使用名称属性并不能解决问题。当请求数组被转储时，它给出 null。
@Eisenheim 你是如何提交表格的？

标签： javascript laravel vue.js

【解决方案1】：

我假设数据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>

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

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

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

【讨论】：

【解决方案2】：

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

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

祝你好运

【讨论】：