时间戳

首页 > 解决方案 > Vue.js 选择多个值

javascript - Vue.js 选择多个值

问题描述

我正在尝试在 vue.js 中使用 multiple=true 设置值来选择。当我设置 v-model 时，一切正常

<select v-model="selected" multiple style="width: 50px;">

但是当我设置 v-bind:value 时，在选择标签中没有选择任何值

<select v-bind:value="selected" multiple style="width: 50px;">

示例代码

如何设置只读值以选择？

更新：我在组件中使用它，所以不能使用 v-model，我必须使用 v-bind:value + v-on:change 对。更改功能已经完成并且就像一个魅力，所以毫无疑问。

标签： javascriptvue.jsvuejs2

解决方案

我不确定，但它可能是一个选项：

new Vue({
  el: '#example-6',
  data: {
    selected: ['A', 'B'],
    options: ['A', 'B', 'C']
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="example-6" class="demo">
  <select multiple style="width: 50px;">
     <option v-for="option in options" :selected="selected.indexOf (option) != -1">{{option}}</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>

推荐阅读