I have a Vue application that uses multiselect, I want to have it so there are 5 options (a,b,c,d,e) and a user can select up to a max of 3. I checked the docs and this doesn't seem to be a supported param since the limit it mentions just limits how many are visable after selecting.

Here is my current code but it doesn't do what I want

Data:

selectedOptions: [],
optionsLimit: 3,
optionsList: ["a","b","c","d","e",]

Template:

<multiselect v-model="selectedOptions" :multiple="true" :options="optionsList" :hide-selected="true"></multiselect>

Current behaviour:

Will allow selecting of all 5 options instead of limiting to 3.

How can I make it so a user can select a max of 3 options?

I have a Vue application that uses multiselect, I want to have it so there are 5 options (a,b,c,d,e) and a user can select up to a max of 3. I checked the docs and this doesn't seem to be a supported param since the limit it mentions just limits how many are visable after selecting.

Here is my current code but it doesn't do what I want

Data:

selectedOptions: [],
optionsLimit: 3,
optionsList: ["a","b","c","d","e",]

Template:

<multiselect v-model="selectedOptions" :multiple="true" :options="optionsList" :hide-selected="true"></multiselect>

Current behaviour:

Will allow selecting of all 5 options instead of limiting to 3.

How can I make it so a user can select a max of 3 options?

• javascript
• vue.js

2 Answers 2

You can use the max prop for this:

Template:

<multiselect v-model="selectedOptions" :multiple="true" :options="optionsList" :hide-selected="true" :max="3"></multiselect>

You can use the disable feature to disable multiselect using :disabled="selectedOptions.length>=optionsLimit". The code below:

// register globally
Vue.ponent('multiselect', window.VueMultiselect.default)

new Vue({
  el: '#app',
  data: {
    selectedOptions: [],
    optionsLimit: 3,
    optionsList: ["a", "b", "c", "d", "e", ]
  },
})

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg./[email protected]"></script>
<link rel="stylesheet" href="https://unpkg./[email protected]/dist/vue-multiselect.min.css">

<div id="app">

  <multiselect v-model=selectedOptions :multiple="true" :options="optionsList" :hide-selected="true" :disabled="selectedOptions.length>=optionsLimit"></multiselect>

</div>