Make vue-select option selectable

Viewed 32

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);
    }
  },
0 Answers
Related