Vue-multiselect: Using a custom dropdown icon

[jackbarham]

No so much a bug, but I would like to use my own custom icon (drop-down arrow) but can't where to add in my HTML for it?

[arenddeboer]

It looks like this is now possible with the latest (github) version using the caret slot

          <template slot="caret">
            <div>
              <div @mousedown.prevent.stop="toggle()" class="multiselect__select">
                <icon name="plus" style="color:green;"></icon>
              </div>

            </div>
          </template>

Whatever you put in the slot template will be set as the caret, in my case a vue-awesome icon.
In this case I have a local toggle method which calls the multiselect toggle method using a ref
You will also have to override some css or include your own.

Another option is using only css by for instance adding a background url to an image and removing the current caret by overriding some styles.

[jackbarham]

Thanks for the suggestion, but I can't get it to work. I'm using version 2.0.2 and this is my code:

<multiselect v-model="country" :options="countries" placeholder="Select or type to search" <multiselect v-model="country" :options="countries" placeholder="Select or type to search" label="label">
    <template slot="caret">
        <div>
            <div @mousedown.prevent.stop="toggle()" class="multiselect__select">
                <i class="icon-down"></i>
            </div>
        </div>
    </template>
</multiselect>

But nothing is displaying back in the HTML

[arenddeboer]

It will not work on the latest npm version. I had to clone this git and run the build script (not sure if the build was necessary) Grep the dist js file for "caret" to see if you have it.

[jackbarham]

Thanks, I'll wait until they release a stable version. Thanks for the heads-up though. Looks like it's on the way.

[shentao]

Weird. Could you please provide a reproduction on jsfiddle?

[jackbarham]

I have added this Fiddle: https://jsfiddle.net/jackbarham/5zh4ob3a

For now, I've used <span>test</span> in the slot to see if something else appears, but it doesn't.

[jackbarham]

Did you have a chance to look at the fiddle @shentao?

[chen8ih]

@jackbarham, I think slot name is "carret", not caret

[shentao]

Eh, just noticed that the change wasn’t released yet (and there was a change in the name). Will push a fix today. Sorry :/

[jackbarham]

Thanks, @shentao - I'll check this evening.

[shentao]

@jackbarham Vue Multiselect 2.0.3 was released.
https://jsfiddle.net/yghbards/ Forked your fiddle with the updated version.

Sorry everyone for the delay. Trying to get back to active maintenance...

[jackbarham]

Thank you. Works perfectly.