Vue js: Multiple options selection
<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>