Vue.js выбрать несколько значений

Question

Я пытаюсь установить значение для выбора с помощью нескольких = true в vue.js.Когда я устанавливаю v-модель, все в порядке

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

, но когда я устанавливаю v-bind: значение, в значке select не выбирается значение

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

Пример кода

Как установить значение только для чтения для выбора?

Обновление: я использую это в компоненте, поэтому v-модель не может быть использована, ядолжны использовать v-bind: значение + v-on: изменить пару.Функция изменения уже выполнена и работает как брелок, так что никаких вопросов по этому поводу.

Answer 1

Я не уверен, но это может быть вариант:

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>

Answer 2

Я думаю, что вы хотели сделать:

<div id="example-6" class="demo">
  <select multiple disabled v-model="selected" style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>

Ваш обновленный jsfiddle .

v-model фактически использует v-bind за кадром.Если вы используете только v-bind, вы пропустите обработку входных событий, и никакие изменения на входе не будут переданы в состояние.

Обновление:

Использованиеv-bind:value, можно выбрать только одну опцию:

v-bind:value="selected[0]" // in the select tag

И вы также можете сделать следующее:

<div id="example-6" class="demo">
  <select multiple disabled style="width: 50px;">
    <option :selected="selected[0]">A</option>
    <option :selected="selected[1]">B</option>
    <option :selected="selected[2]">C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>

jsfiddle

Вот более элегантный способ для этого:

<div id="example-6" class="demo">
  <select multiple disabled style="width: 50px;">
    <option v-for="(option, index) in options" :selected="selected[index]">
    {{ option }}
  </option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>

jsfiddle