0

I have a VueJS application that uses Antdv select component: https://antdv.com/components/select

I want to prevent the user to select more than 4 items. I checked the docs and this doesn't seem to be a supported parameter. I dynamically set the select options prop to disabled:true when the value is greater than 3, but then the entire select list becomes readonly and I cannot delete selected options

Here is what I have

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>
Alexis.Rolland
  • 5,724
  • 6
  • 50
  • 77

1 Answers1

0

You can create a computed to disable unselected items when 4 items are selected

const optionsComputed = computed( () => {
  return items.value.length < 4 ? itemOptions.value : itemOptions.value.map(item => {
    return items.value.includes(item.value) ? item : {...item, disabled: true}
  })
})

Template

<a-select
  v-model:value="items"
  mode="tags"
  placeholder="Select at least one item"
  :options="optionsComputed"
/>
DinhTX
  • 141
  • 4