vue.js - 如何在 v-select 中的选定选项中使用自定义标签模板？

Question

我用过<template slot="option" slot-scope="option">用于 v-select 中的自定义标签。在这里，一切正常。如此处的屏幕截图所示，打开选项时自定义标签工作正常:http://prntscr.com/kluu7p但自定义标签不适用于所选选项或选择关闭时:http://prntscr.com/kluudy .这是我在 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>