2

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

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

问题截图：

在此处输入图像描述

我正在使用道具向用户展示“当前列出的联系人”多选。这是我的单文件组件的代码，这些多选位于其中（也是演示链接：CodeSandBox 代码编辑器）注意：单击 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>
4

1 回答 1

3

您可以使用计算来过滤您的列表：

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

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

于 2020-02-05T19:23:43.100 回答