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建模为选定的prop：

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

此修复程序的想法是，multiselect的options属性将成为id的常规数组。那么v-model是正常属性，将正常提交。 :custom-label将遍历用户列表中的每个选择项。因此，如果您选择的条目少于100条，这是一个好主意。

实际上应该在https://github.com/shentao/vue-multiselect/issues/432上进行辩论。

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

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

2 个答案: