'Selecting mutually exclusive options among multiple select components in Vue 3
There are 5 unique values to the options variable to the vue component. I would like the user to chose only 1 value for every select options I give. i.e. I have 5 input select components, I want the user to select just 1 value in each component which cannot by used by other select component.
For e.g.
input one: [ orange, green, yellow, black, blue ]
input two: [ orange, green, yellow, black, blue ]
input tree: [ orange, green, yellow, black, blue ]
input four: [ orange, green, yellow, black, blue ]
input five: [ orange, green, yellow, black, blue ]
If user selects orange in input one, the user cannot select orange again in inputs 2 to 5.
I have tried creating 2 arrays by maintaining itemSelected[] and itemsAvailable[], however I am unable to solve the issue.
How do I solve this issue in Vue 3?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|