I am working on a VueJS application that incorporates the Antdv select component, which can be found at
My goal is to limit the user's selection to a maximum of 4 items. However, I have not found a supported parameter in the documentation that allows for this functionality. I attempted to dynamically set the select options prop to disabled: true when the value exceeds 3, but this caused the entire select list to become read-only and prevented me from deleting selected options.
Below is an overview of my current setup:
Data
itemOptions: any[] = [
{ label: "a", value: "a" },
{ label: "b", value: "b" },
{ label: "c", value: "c" }
];
items: any[] = [];
Template
<a-select
v-model:value="items"
mode="tags"
placeholder="Select at least one item"
>
<a-select-option
v-for="(item, index) in itemOptions"
:key="index"
:value="item.value"
:disabled="item.length > 3 ? true : false"
>{{ item.label }}
</a-select-option>
</a-select>