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

Question

我正在使用一个名为 Vue-MultiSelect 的插件，并在我的组件中显示了两次。第一个多选标签为 "Add New Contacts"，第二个多选标签为 "Current Listed Contacts".

如果 "Add New Contacts" 多选下拉列表中的用户已列在 "Current Listed Contacts" 中，我该如何隐藏这些用户？

问题截图：

我正在使用道具向用户展示 "Current Listed contacts" 多选。这是我的单文件组件的代码，其中包含这些多选项（也是演示 link：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;
    }
  }

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

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

Vue-MultiSelect: Using two multiselects at once and how to hide options based on what is shown in other

vue.js

vue-cli-3

vue-multiselect