Question

您好vue和js专家！

我有一个值列表[“ A”，“ B”，“ C”，“ D”]

用户需要将值分为两个列表“ List1”和“ List2”。列表中的值不应重叠。假设用户为“ List1”选择了“ A”，则选项“ 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)

Check a demo

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

1 个答案: