时间戳

首页 > 解决方案 > Vue 多选

select - Vue 多选

问题描述

我想在没有 multiple.vue 库的情况下进行多项选择。我想自己写。我在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？我必须为此写一个方法？

标签： selectvue.js

解决方案

你想做类似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>

推荐阅读