Как заблокировать в Select элемент который был избран в другом Select?

Question

[Ghost2692]

На скриншоте показано два селекта (их может быть больше), если выбираем в первом элемент емейл, то во втором этот элемент блокируется или наоборот.
Как это сделать желательно на vue js?

Answer 1

[0xD34F]

Нужны два массива значений - доступных для выбора и выбранных. Пункты select'ов создаются на основе списка доступных значений, в зависимости от присутствия значения в списке выбранных назначаете disabled:

data: () => ({
  items: [...Array(10)].map((n, i) => `item ${i}`),
  selected: Array(4).fill(null),
}),

<select v-for="(s, i) in selected" v-model="selected[i]">
  <option
    v-for="n in items"
    v-text="n"
    :disabled="selected.includes(n)"
  ></option>
</select>

https://jsfiddle.net/2wz6sgxb/

Comments

[Ghost2692]

0xD34F Спасибо за помощь!