最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin0浏览0评论

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.

Share Improve this question edited Jul 16, 2020 at 18:22 David Lee asked Jul 16, 2020 at 5:15 David LeeDavid Lee 8717 silver badges21 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

Reset to default 8

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

发布评论

评论列表(0)

  1. 暂无评论