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

【问题标题】：How to use custom template for label in selected option in v-select?如何在 v-select 的选定选项中为标签使用自定义模板？
【发布时间】：2018-08-23 02:26:09
【问题描述】：

我在 v-select 中使用 <template slot="option" slot-scope="option"> 自定义标签。在这里，一切正常。自定义标签在此处打开选项时正常工作正常：http://prntscr.com/kluu7p但自定义标签不适用于所选选项，或者选择已关闭时：http://prntscr.com/kluudy。这是我在 v-select 中使用自定义模板时使用的 sn-p：

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

【问题讨论】：

您可能会发现stackoverflow.com/questions/51984126/… 很有帮助。

标签： vue.js vuejs2 vue-component v-select

【解决方案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>

【讨论】：