Vue multi select limit option count

Question

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?

Answer 1

You can use the max prop for this:

Template:

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