CODEWITHSUNDEEP
vue.jsvuejs2vue-componentv-select
prajwal_stha
prajwal_stha

Reputation: 377

How to use custom template for label in selected option in v-select?

I have used <template slot="option" slot-scope="option"> for custom label in v-select. Here, everything is working fine. The custom label is working fine when the options are opened as shown in the screenshot here: http://prntscr.com/kluu7p but the custom label is not working for selected option or when the select is closed: http://prntscr.com/kluudy . Here is the snippet I have used to use custom template in v-select:

<v-select @input="updateShippingCharge"
    v-model="selected"
    :options="options">
    <template slot="option" slot-scope="option">
        <span :class="['flag-icon', `flag icon-${option.value.toLowerCase()}`]"></span>
            {{ option.label }}
    </template>
</v-select>

Upvotes: 3

Views: 5003

Answers (1)

Miloš Popović - Syose
Miloš Popović - Syose

Reputation: 23

Add another template with attribute slot="selected-option".

<template slot="selected-option" slot-scope="option"></template>

The final code should look like this:

<v-select @input="updateShippingCharge"
    v-model="selected"
    :options="options">
    <template slot="option" slot-scope="option">
        <span :class="['flag-icon', `flag icon-${option.value.toLowerCase()}`]"></span>
            {{ option.label }}
    </template>
    
    <template slot="selected-option" slot-scope="option">
        <span :class="['flag-icon', `flag icon-${option.value.toLowerCase()}`]"></span>
            {{ option.label }}
    </template>
</v-select>

Upvotes: 1

Related Questions