Vue多选

Question

我想在没有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>

我如何在form.roles中拥有多个role.id？我必须为此写一个方法吗？

Answer 1

你想做https://codepen.io/ittus/pen/vjdLvb

之类的事吗？

您需要在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>