Select Vue多选

我希望在没有multiple.vue librabry的情况下有多个选择。我想自己写。我在js中有这样的数据：

data: 
   roles : [here data]
   form.roles: []

以及我的Vue html：

  <select class="form-control required-select2" v-model="form.roles" id="roles" required>
       <option v-for="role in roles" v-bind:value="role.id" v-bind:selected="form.roles.indexOf(role.id) > -1">
                                        {{ role.display_name }}
       </option>
  </select>

{{role.display_name}

---

如何在form.roles中有多个role.id？我可能需要为此写一个方法？

你想做类似的事情吗

您需要将

multiselect

选项添加到

select

<template>
<select class="form-control required-select2" v-model="form.roles" id="roles" multiple required>
    <option v-for="role in roles" v-bind:value="role.id" v-bind:selected="form.roles.indexOf(role.id) > -1">
                                    {{ role.display_name }}
   </option>
</select>
<div>Selected: {{ form.roles }}</div>

{{role.display_name}
所选：{form.roles}

---

我想要这样的东西：我现在看得很清楚，但是我不能将一些数据（这里是roleIds）传递给我的模型。您在哪里传递

roleIds

？你是说

form.roles

？是的-在form.roles中我有roleids你可以在

https://codepen.io/ittus/pen/vjdLvb

form.roles

是一个数组吗？表单：{memberId:this.member.id，firstname:this.member.user.firstname，lastname:this.member.user.lastname，email:this.member.user.email，roles:Object.values（this.member.actual_roles），}，