Limit user selection on Vuetify v-autocomplete - vuetify.js

Question

I'm struggling and googling on how to control the v-autocomplete for a while, but still didn't find a good answer. I'm trying to use v-autocomplete for multiple city selection and attempting to limit a user to select at maximum of 5. I would expect that it would stop the user from adding more selection. Currently, the counter only turns red, but still lets the user add more when it passes 5. Is there any Props or functions to let me do this? I ran into description somewhere and it said I had to use other validation API, but I didn't find any example anywhere.
Also, one of the options is Top 5 Cities. I'd like to consider it as 5 cities being selected. Is there a way to advance the count of this option to 5? And, disable the Top 5 option when remaining counter is less than 5? Thank you,
<v-autocomplete
label="Cities"
v-model="selectedValue"
:items="itemList"
item-text="name"
item-value="id"
hide-no-data
hide-selected
counter="5"
multiple
chips
deletable-chips
></v-autocomplete>
My sample code is here. https://codepen.io/OpPen/pen/LYpJppa
Thank you very much.

Answer 1

I managed to get it mostly working.
Menu will be disabled when the computedCouterValue reaches 5 or more.
computedCouterValue counts each selected as 1 unit, but Top 5 is counted as 5.
If user select Top 5, other cities cannot be further selected. Menu is disabled
If a city is selected, Top 5 is disabled as it would exceed max total count.
If there are better ways to do this or Vuetify has something out of the box I can use, please let me know.
One thing that I cannot find get resolved is that I cannot set the counter value to reflect my custom count from computedCounterValue. I want the counter to show 5/5 when Top 5 is selected. I tried to use prop "counter-value", but it doesn't take effect.
<v-autocomplete
label="Cities"
v-model="selectedValues"
:items="itemList"
item-text="name"
item-value="id"
hide-no-data
hide-selected
:counter="maxSelected"
:counter-value="computedCounterValue"
:menu-props="menuProps"
multiple
chips
deletable-chips
#input="adjustOptions"
></v-autocomplete>
</v-container>
https://codepen.io/OpPen/pen/LYpJppa

Answer 2

You can add computed property for autocomplete items and if selected length would be more than 4 (5), you just return selected items to autocomplete items, so user just couldn't pick something else. Availablitity to pick will return only if he remove at least 1 city.

Answer 3

I only add a function when #change is active and inside the function I check the model size. I remove the last value of the model, for example. So the user cannot select other option.
<v-select
v-model="currentCategories"
:items="categories"
item-text="name"
item-value="id"
chips
placeholder="Select category"
multiple
outlined
dense
#blur="updateGifts"
#change="limiteCategory"
></v-select>
limiteCategory() {
if (this.currentCategory.length > 5) this.currentCategory.pop();
},

Answer 4

I had a similar problem that I solved with a workaround. I ended up rendering the form invalid and showing a message instead of preventing user input after the threshold.
<v-autocomplete
...
:counter="maxNumberOfChoices"
:rules="validationRules"
>
computed: {
validationRules () {
return this.maxNumberOfChoices ? [this.validateMaxNumberOfChoices] : []
}
},
methods: {
validateMaxNumberOfChoices (selectedChoices) {
return selectedChoices.length <= this.maxNumberOfChoices || `Choose ${this.maxNumberOfChoices} at most.`
},
}