javascript - How to not have tags in vue-multiselect? - Stack Overflow

admin管理员组

文章数量:1327971

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.

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. Here its the minimal code to reproduce the issue.

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

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.

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. Here its the minimal code to reproduce the issue.

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

• javascript
• vue.js
• vue-multiselect

Share Improve this question Follow edited Jul 16, 2020 at 18:22 David Lee asked Jul 16, 2020 at 5:15 David LeeDavid Lee 87177 silver badges2121 bronze badges 2

• Could you show us a little more code, preferably a minimal, reproducible example? stackoverflow./help/minimal-reproducible-example – samu Commented Jul 16, 2020 at 5:26
• @samu i did, codesandbox.io/s/vue-multiselect-no-tags-nuhsh?file=/src/… – David Lee Commented Jul 16, 2020 at 5:30

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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

本文标签： javascriptHow to not have tags in vuemultiselectStack Overflow