Vue-multiselect: Add slot for tags

[SidKwok]

I don't want my tags to be all green. How can I change the color?

[shentao]

Hey!

Look at the Multiselect.vue file here: https://github.com/monterail/vue-multiselect/blob/master/src/Multiselect.vue

You have to override the css styles.
The class for tags is .multiselect__tag.
If you want to change the background colors for highlights you have to override .multiselect__option--highlight and .multiselect__option--selected.multiselect__option--highlight.

[SidKwok]

Oh, Thanks. But what should I override if I want three different colors on three different tags?
Coz in some cases I need different colors to show the different meanings in tags.

It would be better if I can custom the colors like this:

[
    {
        colors: red,
        value: China
    },
    {
        colors: green,
        value: Canada
    }
]

[shentao]

This is sadly not possible right now. It would require a custom partial for tags, which is a much smaller thing than custom option list. I might however introduce such feature in the 2.0 release as custom render function for tags.

[SidKwok]

That would be greate! Look forward to the 2.0 release. :)

[jaketoolson]

@shentao was this something you ever worked on or towards?

[shentao]

Not yet. I will reopen this with a changed title to not forget this.
In case you want to manipulate the color in selected tags, for now, you would have to create a new component by extend multiselect and use a custom template that supports this feature.

Use CSS to change the color for all tags.

[jaketoolson]

The reason I found this closed issue, is, i was hoping to create "Tags" similar to github/Trello - each tag can also have its own associated color. I realize, this is very custom and something I would have to likely write myself, but thought I'd search and ask :)

[MarZab]

I've also found a good usecase, I want to make a VisualSearch.js like component.

https://documentcloud.github.io/visualsearch/

Any news on this bug?

[shentao]

Slot added. Should be available with the new release.

[rodrigobutta]

Hi! Was this feature added to the release 2 at last? I can't find any doc about it but for what i read here, it's there. Thanks!!

[pczarn]

@rodrigobutta yes, it's released with the tag slot, although it doesn't seem to be documented yet

[sebestenyb]

Hi @pczarn , is it released as a tagged release?

[aelliott1485]

@shentao I was attempting to find a solution as described by the OP of Issue #338. I see that I can utilize the tag slot and like @pczarn mentioned, it isn't documented yet.

I added a <template> to my component template, like this:

<template slot="tag" scope="props">
    <span class="multiselect__tag">
      <span v-text="getOptionDisplay(props.option)"></span>
      <i aria-hidden="true" tabindex="1" @keydown.enter.prevent="removeElement(props.option)"  @mousedown.prevent="removeElement(props.option)" class="multiselect__tag-icon"></i>
    </span>
</template>

And then added a method to the component:

removeElement: function(element) {
    this.$refs.vselect.removeElement(element);
},

Where the vue-multiselect tag has attribute ref="vselect".

Is this the best way to achieve the desired functionality, or is there a simpler approach?

[shentao]

Hey :) It is documented here: https://monterail.github.io/vue-multiselect/#sub-multiple-select (look at the pug/html example)

[aelliott1485]

Okay - I think I looked at that but must not have made the connection that props.remove was equivalent to removeElement() . Thanks!

[lucasprograms]

The link above is broken, the documentation for it is now here: https://vue-multiselect.js.org/#sub-asynchronous-select