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

Question

我<template slot="option" slot-scope="option">在 v-select 中使用了自定义标签。在这里，一切正常。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/克鲁迪。这是我在 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>