Question

我尝试用select2多次选择我使用了laravel，我在userRoles上的数据是带有关系角色的用户模型的返回数据，allRoles只是在角色模型中视图上的代码

<select class="form-control" name="roles[]" id="roles"  multiple>
            <option v-for="role in allRoles"
                    :value="role.id"
                    >
                @{{ role.name }}
            </option>
 </select>

如何使用userRoles数组设置所选选项？

Answer 1

添加computed hashMap（对象）以搜索所选角色：

computed: {
    selectedRoleMap() {
        var map = {};
        this.userRoles.forEach(role => {
            map[role] = 1;
        });
        return map;
    }
}

然后将:selected="selectedRoleMap.hasOwnProperty(role.id)"添加到option s。

在这里工作小提琴：https://jsfiddle.net/df7j8xhz/

或者，您可以添加hasRole method来循环浏览userRoles以查看id是否在userRoles中，但是构建一个hashMap并搜索在其中具有比循环数组allRoles.length次更好的性能。

VueJS多重选择

1 个答案: