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 }}

Saurabh · Accepted Answer · 2016-11-16 11:11:53Z

4

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

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

answered Nov 16, 2016 at 11:11

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Amresh Venugopal Over a year ago

Thanks, I'll accept this answer, although I had used the expression so that I can use this component for both single and multi select use. Any idea how I can do that?

Saurabh Over a year ago

@AmreshVenugopal Not sure why that is not working, I tried many ways, will get back to you if I found something related.

ScottyG · Accepted Answer · 2020-05-22 14:56:35Z

1

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>

answered May 22, 2020 at 14:56

ScottyG

3,4503 gold badges35 silver badges44 bronze badges

1 Comment

PotatoFarmer Over a year ago

vue-multiselect appears to be abandoned - vue-select seems to be more maintained.

Collectives™ on Stack Overflow

Vue js: Multiple options selection

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related