无需multiple.vue库，如何实现Vue多选下拉框？

嘿，这个问题其实很简单，核心是利用原生HTML的多选特性加上Vue的双向绑定就能搞定，不需要额外编写方法，我给你一步步说清楚：

关键修改点 #

• 给<select>标签加上multiple属性——这是原生HTML实现多选下拉的基础，没有它的话下拉框只能单选，v-model绑定数组也发挥不了作用。
• 移除<option>上的v-bind:selected绑定，因为Vue的v-model会自动根据form.roles数组的内容来控制选项的选中状态，手动加selected会和v-model的逻辑冲突，反而导致选中状态异常。

修改后的完整代码 #

<select 
  class="form-control required-select2" 
  v-model="form.roles" 
  id="roles" 
  required
  multiple  <!-- 新增的多选属性 -->
>
  <option 
    v-for="role in roles" 
    :key="role.id"  <!-- 加上key是Vue循环渲染的最佳实践 -->
    :value="role.id"
  >
    {{ role.display_name }}
  </option>
</select>

效果说明 #

当你按住Ctrl（Windows）或Command（Mac）键选择多个选项时，form.roles数组会自动同步选中的所有role.id；取消选择某个选项时，对应id也会从数组里自动移除，完全不需要额外写方法来处理添加/删除逻辑。

可选优化（非必需） #

如果想要优化用户体验，比如显示已选数量、自定义多选样式，或者处理一些特殊的选中逻辑，那可能需要写一些辅助方法，但基础的多选值存储功能完全靠上面的代码就能实现。

内容的提问来源于stack exchange，提问作者wenus