0

嗨 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>
4

1 回答 1

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)

检查演示

于 2018-09-26T02:24:08.010 回答