Как синхронизировать список опций между несколькими селектами во Vue?

Question

[syntaxsugar]

Есть несколько селектов с одинаковым списком значений и есть задача заполнить массив на основе выбранных в каждом из селектов значений и его порядкового номера. То есть значение из первого селекта пишется в первый элемент массива и т.д. При этом значения в целевом массиве должны быть уникальны, а для этого после установки каждого значения нужно фильтровать список доступных элементов во всех селектах. Не пойму как реализовать. Если просто переносить элементы между массивами значений селектов и целевым то нарушается порядок индексов. Если использовать computed свойство для фильтрации отображаемых элементов в списке - то оно не обновляется самостоятельно. Еще не понятно по какому событию можно вернуть выбранные ранее элементы обратно если выбор в селекте поменялся (делался неоднократно).

Comments

[syntaxsugar]

https://codepen.io/gaara-sand/pen/LJqMRe

Answer 1

[0xD34F]

Делаете метод фильтрации опций, который в качестве аргумента принимает индекс текущего селекта:

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

И передаёте в v-for отфильтрованные опции. Типа так.