Vue-MultiSelect：一次使用两个多重选择，以及如何根据其他显示的内容隐藏选项

Question

我正在使用名为Vue-MultiSelect的插件，并在组件中两次显示该插件。第一个多重选择的标签为“添加新联系人”，第二个多重选择的标签为“当前列出的联系人”。

如果“添加新联系人”多选下拉列表中的用户已经在“当前列出的联系人”中列出，该如何隐藏它们？

问题的屏幕截图：

我正在使用道具向用户显示“当前列出的联系人”多项选择。这是这些多重选择所在的“我的单个文件”组件的代码（也是演示链接：CodeSandBox Code Editor）注意：单击POSTS-> EDIT（Acme Widget）以查看我正在谈论的页面

<template>
  <div>
    <label>Add New Contacts:</label>
    <multiselect
      id="add_new_contacts_input"
      v-model="NewContacts"
      :options="options"
      label="lastname"
      placeholder="Select or search for an existing contact"
      track-by="uid"
      :loading="isLoading"
      :custom-label="selectedNameLabel"
      aria-describedby="searchHelpBlock"
      selectLabel
      :multiple="true"
    >
      <template
        slot="singleLabel"
        slot-scope="props"
      >{{ props.option.lastname }}, {{props.option.firstname}}</template>
      <template slot="option" slot-scope="props">
        <strong>{{ props.option.lastname }}</strong>
        , {{ props.option.firstname }} &mdash;
        <small>{{ props.option.email }}</small>
      </template>
    </multiselect>
    <!-- <small id="searchHelpBlock" class="form-text text-muted"><font-awesome-icon icon="exclamation-circle" /> If customer does not exist, you will be prompted to add a new customer</small> -->
    <!-- <h3>New contacts to be added:</h3>
    <ul>
      <li v-for="value in values" :key="value.uid">{{value.lastname}}, {{value.firstname}}</li>
    </ul>-->
    <label>Current Listed Contacts</label>
    <multiselect
      id="current_listed_contacts_input"
      v-model="CurrentListedValues"
      placeholder="There are no current contacts"
      label="lastname"
      track-by="uid"
      :options="options"
      :multiple="true"
      :custom-label="selectedNameLabel"
      :loading="isLoading"
      selectLabel
    >
      <!-- formatting for the drop down list -->
      <template slot="option" slot-scope="props">
        <strong>{{ props.option.lastname }}</strong>
        , {{ props.option.firstname }} &mdash;
        <small>{{ props.option.email }}</small>
      </template>
    </multiselect>
  </div>
</template>

<script>
import Multiselect from "vue-multiselect";
// import ApiService from "@/apiService";
export default {
  components: { Multiselect },
  props: ["users", "contacts"],
  data() {
    return {
      NewContacts: [],
      CurrentListedValues: this.contacts,
      options: this.users,
      isLoading: true
    };
  },
  created() {
    this.isLoading = false;
  },
  methods: {
    selectedNameLabel(option) {
      return `${option.lastname}, ${option.firstname} -- ${option.email}`;
    }
  }
};
</script>

Answer 1

  computed: {
    addOptions() {
      let opt = this.users;
      this.CurrentListedValues.forEach(c => {
        opt = opt.filter(i => i.uid !== c.uid);
      });
      return opt;
    }
  }

并且在您的选择列表中，将选项更改为addOptions：:options="addOptions"