时间戳

首页 > 解决方案 > Vue-Multiselect 插件：如何安全地删除“添加新”标签功能？

vuejs2 - Vue-Multiselect 插件：如何安全地删除“添加新”标签功能？

问题描述

我正在使用一个名为Vue-Multiselect的插件，它在我的应用程序上运行良好。但是，插件中有一个我不想要的功能。我怎样才能安全地删除它？

让我解释一下：CodeSandBox 协作编辑器。 注意：要查看此流程的实际效果，请选择 ACME Widget 旁边的 EDIT，然后在多选输入框中搜索现有用户。

在多选输入框中搜索用户时，如果找到匹配项，则弹出匹配项供用户选择。那很好。但是，当未找到用户时，会有一个占位符文本显示以下内容：Press enter to create a tag. 如果选项不存在，我不想让我的用户能够创建新的标签/选项。如何从此组件中删除该功能？

这是我的多选组件代码：

    <multiselect
      id="customer_last_name_input"
      v-model="values"
      :options="options"
      label="lastname"
      placeholder="Select or search for an existing customer"
      track-by="uid"
      :loading="isLoading"
      :custom-label="customerSelectName"
      aria-describedby="searchHelpBlock"
      selectLabel
      :multiple="true"
      :taggable="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>
      <!-- <template slot="noResult">Looks like this customer doesn't exist yet.<button class="btn btn-primary" type="button" @click="addCustomer">Add Customer</button></template> -->
    </multiselect>

标签： vuejs2vue-multiselect

解决方案

我找到了答案。我只是taggle=true从多选组件中删除了道具。

推荐阅读