vue-multiselect два элемента управления один источник без наложения элементов

Question

Привет, эксперты vue и js!

У меня есть список значений ["A", "B", "C", "D"]

пользователь должен выбрать значенияна два списка "List1" и "List2".Значения в списках не должны пересекаться.Допустим, пользователь выбирает «A» для «List1», опция «A» должна стать недоступной для выбора в «List2»

В настоящее время я использую два экземпляра компонента Vue-Mulitselect, которые имеют один и тот же список параметров.Он работает нормально, но значения в «List1» и «List2» могут перекрываться (например, пользователь может выбрать «A» в обоих списках).

Посоветуйте, пожалуйста, как связать два мультиселектора для совместного использования одного и того же списка параметров без наложения?

<template>
  <div>
    <multiselect v-model="List1" :options="options"></multiselect>
    <multiselect v-model="List2" :options="options"></multiselect>
  </div>
</template>

<script>
  import Multiselect from 'vue-multiselect'

  export default {
    components: { Multiselect },
    data () {
      return {
        List1: null,
        List2: null, 
        options: ['A', 'B', 'C', 'D']
      }
    }
  }
</script>

Answer 1

Вы можете использовать computed свойство:

<multiselect v-model="List1" :options="options1"></multiselect>
<multiselect v-model="List2" :options="options2"></multiselect>

 computed: {
    options1 () {
      return this.options.filter(item => item !== this.List2)
    },
    options2 () {
      return this.options.filter(item => item !== this.List1)
    }
 }

В вашем случае он выбран один раз.Если это множественный выбор, вы должны изменить

return this.options.filter(item => this.List2.includes(item)

Проверьте демо