v-select에서 선택한 옵션의 레이블에 사용자 지정 템플릿을 사용하는 방법

v-select에서 선택한 옵션의 레이블에 사용자 지정 템플릿을 사용하는 방법

사용한 적이 있다<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>

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>

언급URL : https://stackoverflow.com/questions/51977549/how-to-use-custom-template-for-label-in-selected-option-in-v-select