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)

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