How can I make options selectable again when I change the selected option to a new option and clear the selected option? I have an add item button where user can click it multiple and it will add a dropdown. If the Item 1 option is already selected in dropdown then it will disabled the Item 1 option in the dropdown 2 but when I change the option (Item 3) in dropdown 1, the Item 1 option can't be select again. I'm using vue-select and I used :selectable props to make the option disabled when the option already selected.
This what I've did:
<v-select
name="item_usage_item.item_id"
label="code"
:key="'item-field'"
:value="item_usage_item.item_id"
:options="lists.items.item"
:reduce="(entry) => entry.id"
:selectable="
(option) => !entry.selected.includes(option.id)
"
@input="
updateItem({
key: item_usage_item.id,
attr: 'item_id',
item_id: $event,
})
"
@search.focus="focusField('item_usage_item.item_id')"
@search.blur="clearFocus"
/>
updateItem(params) {
this.setItem(params);
this.setSelectedItem(params.item_id);
},
setSelectedItem(state, params) {
if (!state.entry.selected.includes(params) && params !== null) {
state.entry.selected.push(params);
}
},