Vue-select: HTML Label

[nya1]

Hi,
Is HTML on labels supported?

example:

[
    {
        "value": "foo",
        "label": "<b>foo</b>"
    }
]

Should output the bold "foo"

[darkopetreski]

No. It will be not bold. It will be escaped.

From the source code:

<a @mousedown.prevent="select(option)"> {{ getOptionLabel(option) }} </a>

This means it will escape whatever you put in the label.

[sagalbot]

@nya1 this is coming in v2.3.0.

[ouraios]

When will v2.3.0 will be released ? Without this feature i can't use your awesome component :(

[JosephMendez]

When will v2.3.0 will be released ? Without this feature i can't use your awesome component :(

[dolbex]

Looks like this was dropped?

[ouraios]

@sagalbot ?? Any news ?? You released v 2.3.0 and more but still no html label :(

[huglester]

Any updates on this?

is there a way to pass HTML labels?
:get-option-label="getOrderLabel"

getOrderLabel(option) {
return '<span class="red">'+option.status.name+'</span>'
}

this would return escaped html..

[benplain]

For anyone interested, the way to do this would be to use the selected-option slot.

Put this within your <v-select></v-select> component.

<template slot="selected-option" slot-scope="option">
    <span v-html="option.label"></span>
</template>

This will give you your label in html.

[sagalbot]

Examples here: https://vue-select.org/guide/slots.html