title: Vue js: Multiple options selection
body: <p><strong>Objective:</strong> To Select multiple options of a select tag.</p>
  <p><strong>Attempt:</strong> The <a href="https://v2.vuejs.org/v2/guide/forms.html" rel="nofollow noreferrer">documentation</a> says: to implement a multi-select input, the property to be bound using <code>v-model</code> should be an array.</p>
  <p><strong>Errors:</strong> [Vue warn]:  expects an Array value for its binding, but got String.</p>
  <p>The value bound to (<code>multipleSelections</code>), is an array, so what is the reason for this?</p>
  <p>Here is the <a href="https://jsfiddle.net/codewingx/mrn3ddf3/9/" rel="nofollow noreferrer">jsfiddle</a>.</p>
  <p>script:</p>
  <pre><code>new Vue({
  el:'#app',
  data: function() {
    return {
        multipleSelections: [&quot;Mr Potato (Manager)&quot;],
        data: null,
        multiple: &quot;true&quot;,
        assets:[&quot;Mr Potato (Manager)&quot;, &quot;Mr Blade (Manager)&quot;, &quot;Mrs Spice (Manager)&quot;]
      }
    },
    created() {
      console.log(&quot;selections: &quot;,this.multipleSelections);
    }
  });
  </code></pre>
  <p>html:</p>
  <pre><code>&lt;script src=&quot;https://unpkg.com/vue@2.0.6/dist/vue.js&quot;&gt;&lt;/script&gt;
  &lt;div class='container' id='app'&gt;
    &lt;h2&gt;{{&quot;title&quot;.toUpperCase()}}&lt;/h2&gt;
    &lt;p class='center help-text' v-if=&quot;multiple === 'true'&quot;&gt;(Use ctrl or cmd to select multiple)&lt;/p&gt;
    &lt;select
      :multiple=&quot;multiple === 'true'&quot;
      v-bind:class=&quot;{ 'fix-height': multiple === 'true' }&quot;
      v-model=&quot;multipleSelections&quot;
     &gt;
      &lt;option
        v-for=&quot;asset in assets&quot;
        :value=&quot;asset&quot;&gt;
        {{asset}}
      &lt;/option&gt;
    &lt;/select&gt;
  {{ multipleSelections }}
  </code></pre>