Как использовать пользовательский шаблон для метки в выбранной опции в v-select?

Question

Я использовал <template slot="option" slot-scope="option"> для пользовательской метки в v-select. Здесь все работает нормально. Пользовательская метка работает нормально, когда параметры открываются, как показано на скриншоте здесь: http://prntscr.com/kluu7p но пользовательская метка не работает для выбранной опции или когда выбор закрыт: http: // prntscr. ком / клууды. Вот фрагмент, который я использовал, чтобы использовать пользовательский шаблон в 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>

Answer 1

Добавьте еще один шаблон с атрибутом slot="selected-option" .

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

Окончательный код должен выглядеть так:

      <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>