CODEWITHSUNDEEP
vuejs2vue-multiselect
redshift
redshift

Reputation: 5217

Vue-Multiselect Plugin: How to safely remove "add a new" tag functionality?

I am using a plugin called Vue-Multiselect and have it working pretty good on my app. However, there is a functionality in the plugin that I do no want. How can I safely remove it?

Let me explain: CodeSandBox Collaboration Editor . Note: To see this flow in action, choose EDIT next to ACME Widget and then search for an on existent user in the multiselect input box.

When a user is searched for in the multiselect input box, and if a match is found, the match pops up for the user to select. That is good. However, when a user is NOT found, there's a placeholder text that says the following: Press enter to create a tag . I do NOT want to give my users the ability to create new tags/options if the option does not exist. How can I remove that functionality from this component?

Here is my multi-select component code:

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

Upvotes: 0

Views: 720

Answers (1)

redshift
redshift

Reputation: 5217

I found the answer. I simply remove the taggle=true prop from the multiselect component.

Upvotes: 1

Related Questions