Search code examples
javascriptvue.jsvue-multiselect

How to not have tags in vue-multiselect?

I am using vue-multiselect and I copied the example vue-multiselect multiple select

<div>
  <label class="typo__label">Simple select / dropdown</label>
  <multiselect v-model="value" :options="options" :multiple="true" :close-on-select="false" :clear-on-select="false" :preserve-search="true" placeholder="Pick some" label="name" track-by="name" :preselect-first="true">
    <template slot="selection" slot-scope="{ values, search, isOpen }"><span class="multiselect__single" v-if="values.length &amp;&amp; !isOpen">{{ values.length }} options selected</span></template>
  </multiselect>
  <pre class="language-json"><code>{{ value  }}</code></pre>
</div>

In the example it can be seen that the tags are not present, this happens in all examples, by default the tagging its not present in any example.

enter image description here

But when using the code of the example the tagging does show,

  • i tried using :taggable="false",
  • i tried using <template #tag></template>
  • I also inspected, and it's not CSS hiding it the tags are still showing. enter image description here Here its the minimal code to reproduce the issue.

The Desired behaviour its to not show the tagging just like in the examples.

Solution

  • You should use <template slot="tag">{{ '' }}</template> to hide the tags.