vue-multiselect 两个控件一个源没有项目重叠

Question

您好 vue 和 js 专家！

我有一个值列表 ["A"、"B"、"C"、"D"]

用户需要将值选取到两个列表 "List1" 和 "List2" 中。列表中的值不应重叠。假设用户为 "List1" 选择 "A"，选项 "A" 应该在 "List2"

中变得不可用

目前我正在使用 Vue-Multiselect 组件的两个实例，它们共享相同的选项列表。它工作正常，但 "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)
    }
 }

您的情况是 select 单身。如果是多个select，你应该改变

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

Check a demo

vue-multiselect 两个控件一个源没有项目重叠

vue-multiselect two controls one source with no item overlapping

vue.js

vuejs2

vue-component

vue-multiselect