VueJS 多选答案

【问题标题】：VueJS multiple selectionVueJS 多选
【发布时间】：2016-11-25 19:59:17
【问题描述】：

我尝试使用 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 数组设置选中的选项？

【问题讨论】：

标签： laravel-5 vue.js

【解决方案1】：

添加computed hashMap（对象）来搜索选定的角色：

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

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

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

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

【讨论】：

@Rai 为什么需要那个数组？您的问题是选择正确的optionss 吗？
让我们continue this discussion in chat。
@Rai 让我们在聊天中继续讨论。