How to synchronize list of options across multiple selects in Vue?

Question

Vue.js

There are several selects with the same list of values ​​and there is a task to fill the array based on the values ​​selected in each of the selects and its ordinal number. That is, the value from the first select is written to the first element of the array, and so on. In this case, the values ​​in the target array must be unique, and for this, after setting each value, you need to filter the list of available elements in all selects. I don't understand how to implement. If you simply transfer elements between the arrays of select values ​​and the target, then the order of the indices is violated. If you use a computed property to filter the displayed items in the list, then it does not update itself. It is not yet clear on what event it is possible to return the previously selected elements back if the choice in the select has changed (it has been done repeatedly).

Answer 1

Make an option filtering method that takes the index of the current select as an argument:

filterItems(index) {
  return this.items.filter(n => [ -1, index ].includes(this.selected.indexOf(n)));
}

And you pass it to the v-forfiltered options. Like so .