How to make tags for each select unique in vue-multiselect

Question

I have a custom dropdown created using vue-multiselect. It should be a simple dropdown that lists the selected choices as tags. It works, but when I add other dropdowns the selected tags in one dropdown appear in all of the rest. How can I make so that each dropdown shows only the selected options for it without filling the other dropdowns?

Here is my code:

 <multiselect
         v-model="value"
             tag-placeholder="Add this as new tag"
             placeholder="Assesors"
             label="name"
             track-by="code"
             :options="options"
             :multiple="true"
             :taggable="true"
   ></multiselect>


 <multiselect
         v-model="value"
             tag-placeholder="Add this as new tag"
             placeholder="Assesors"
             label="name"
             track-by="code"
             :options="options"
             :multiple="true"
             :taggable="true"
   ></multiselect>


 <multiselect
         v-model="value"
             tag-placeholder="Add this as new tag"
             placeholder="Assesors"
             label="name"
             track-by="code"
             :options="options"
             :multiple="true"
             :taggable="true"
   ></multiselect>

and my javascript:

 data() {
    return {
      showAddUserDialog: false,
       value: [],
       options: [
        { name: "Assesors", code: "as" },
        { name: "Finance", code: "fi" },
        { name: "Sales", code: "sa" },
      ]
    }
  }

and a working codepen:

https://codesandbox.io/s/multiselect-tag-example-forked-qecqn

Fernando Vidigal Fernando Vidigal · Accepted Answer · 2020-11-22T02:33:57

You are using the same variable "value" as the v-model for the three inputs, which is causing all the selects to show the same selected data.

Try changing to different variables in the v-model (such as value, value1 and value2, for example) and you will be fine.

     <multiselect
         v-model="value"
             tag-placeholder="Add this as new tag"
             placeholder="Assesors"
             label="name"
             track-by="code"
             :options="options"
             :multiple="true"
             :taggable="true"
   ></multiselect>


 <multiselect
         v-model="value1"
             tag-placeholder="Add this as new tag"
             placeholder="Assesors"
             label="name"
             track-by="code"
             :options="options"
             :multiple="true"
             :taggable="true"
   ></multiselect>

and make sure to add value1 in the js:

 data() {
    return {
      showAddUserDialog: false,
       value: [],
       value1: [],
       options: [
        { name: "Assesors", code: "as" },
        { name: "Finance", code: "fi" },
        { name: "Sales", code: "sa" },
      ]
    }
  }

How to make tags for each select unique in vue-multiselect

1 Answers