[Vuejs]-Vue JS – How can you ensure the same item from the common list <v-select> does not get selected twice in multiple components?

by

0👍

You can do this by adding a property called disabled to your item and compute the value of that property based on the selection of other items:

get filteredItems() {
    return this.items.map((item) => 
      id: item.identifier, // replace this with the items identifier
      text: item.text_value, // replace this with your items display text
      disabled: this.items.filter((item) => [...this.firstSelection,...this.secondSelection].filter((selection) => selection === item).length > 0)
      // ^ replace the above destructured array params with your real v-model bindings
      // if the v-models bindings aren't arrays (and the select isn't multiple)
      // then there is no reason to destructure that value
    })
}

Now modify your v-select component and add a value for the item-disabled property that matches the key that we can lookup in the map:

<v-select :items="filteredItems" item-text="text" item-id="id" item-disabled="disabled"

0👍

So what I ended up doing is binding to :item-disabled property- I bind selected to and maintain it from the parent throughout all the child components. It get deselected – I emit the event to the parent saying hey element by id “this” is no longer selected. That in turn refreshes it for all the components that are getting this list through props. Ohgodwhy has a pretty similar solution (thanks!).

Leave a comment