Vue js: Multiple options selection

Question

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/[email protected]/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 1

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

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

Answer 2

I found this plug-in did the trick if your looking for something full featured. It also has great documentation (see links below).

https://vue-multiselect.js.org/

After you install the library check out the example straight from the documentation: https://vue-multiselect.js.org/#sub-getting-started

<!-- Vue component -->
<template>
  <div>
    <multiselect v-model="value" :options="options"></multiselect>
  </div>
</template>

<script>
  import Multiselect from 'vue-multiselect'

  // register globally
  Vue.component('multiselect', Multiselect)

  export default {
    // OR register locally
    components: { Multiselect },
    data () {
      return {
        value: null,
        options: ['list', 'of', 'options']
      }
    }
  }
</script>

<!-- New step!
     Add Multiselect CSS. Can be added as a static asset or inside a component. -->
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

<style>
  your styles
</style>