Amresh Venugopal Amresh Venugopal - 22 days ago 13
Javascript Question

Vue js: Multiple options selection

Objective: To Select multiple options of a select tag.

Attempt: The documentation says: to implement a multi-select input, the property to be bound using

v-model
should be an array.

Errors: [Vue warn]: expects an Array value for its binding, but got String.

The value bound to (
multipleSelections
), is an array, so what is the reason for this?

Here is the jsfiddle.

script:

new Vue({
el:'#app',
data: function() {
return {
multipleSelections: ["Mr Potato (Manager)"],
data: null,
multiple: "true",
assets:["Mr Potato (Manager)", "Mr Blade (Manager)", "Mrs Spice (Manager)"]
}
},
created() {
console.log("selections: ",this.multipleSelections);
}
});


html:

<script src="https://unpkg.com/vue@2.0.6/dist/vue.js"></script>
<div class='container' id='app'>
<h2>{{"title".toUpperCase()}}</h2>
<p class='center help-text' v-if="multiple === 'true'">(Use ctrl or cmd to select multiple)</p>
<select
:multiple="multiple === 'true'"
v-bind:class="{ 'fix-height': multiple === 'true' }"
v-model="multipleSelections"
>
<option
v-for="asset in assets"
:value="asset">
{{asset}}
</option>
</select>
{{ multipleSelections }}



Answer

Just giving multiple="true" in select works. Here is jsfiddle link.

 <select
      multiple="true"
      v-bind:class="{ 'fix-height': multiple === 'true' }"
      v-model="multipleSelections"
      >