CODEWITHSUNDEEP
javascriptvue.js
joshk132
joshk132

Reputation: 1093

Vue multi select limit option count

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?

Upvotes: 4

Views: 4629

Answers (2)

Abbas
Abbas

Reputation: 1255

You can use the max prop for this: a snapshot from vue-multiselect docs

Template:

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

Upvotes: 6

tuhin47
tuhin47

Reputation: 6058

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

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

new Vue({
  el: '#app',
  data: {
    selectedOptions: [],
    optionsLimit: 3,
    optionsList: ["a", "b", "c", "d", "e", ]
  },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<link rel="stylesheet" href="https://unpkg.com/[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>

Upvotes: 0

Related Questions