v-autocomplete选择项后图标格式未显示，如何实现自动失焦？

我希望在v-autocomplete组件中使用不同颜色的图标，已针对v-slot:item和v-slot:selection分别进行了格式化配置，代码如下：

<v-autocomplete :items="itemList" v-model="selectedValue">
    <template v-slot:selection="{ props, item }">
        <v-icon size="small" :color="item.raw.color" class="mr-3 pt-1">mdi-circle</v-icon>
        {{item.title}}            
    </template>
    <template v-slot:item="{ props, item }">
        <v-list-item v-bind="props">
            <template v-slot:prepend>
                <v-icon :color="item.raw.color" class="mr-3">mdi-circle</v-icon>
            </template>                
        </v-list-item>
    </template>
</v-autocomplete>

当前问题：选择下拉列表中的选项后，下拉菜单关闭，输入框仅显示文本；点击组件外部使其失焦后，才会正常显示带图标的格式。请问如何实现选择项后直接显示带图标的格式？能否在modelValue变化时自动触发组件失焦？

方法：监听选中值变化，手动触发组件失焦 #

问题根源是v-autocomplete在聚焦状态下，会优先显示输入框的文本内容而非selection插槽的自定义模板。我们可以通过监听选中值的变化，在选择完成后让组件自动失焦，从而立刻渲染自定义的带图标样式。

1. 给v-autocomplete添加ref属性，方便后续操作组件实例：

<v-autocomplete 
  ref="colorAutocomplete"
  :items="itemList" 
  v-model="selectedValue"
>
    <!-- 原有插槽代码保持不变 -->
    <template v-slot:selection="{ props, item }">
        <v-icon size="small" :color="item.raw.color" class="mr-3 pt-1">mdi-circle</v-icon>
        {{item.title}}            
    </template>
    <template v-slot:item="{ props, item }">
        <v-list-item v-bind="props">
            <template v-slot:prepend>
                <v-icon :color="item.raw.color" class="mr-3">mdi-circle</v-icon>
            </template>                
        </v-list-item>
    </template>
</v-autocomplete>

2. 在组件中监听选中值变化，调用组件的blur()方法：

// Vue 2 选项式API写法
watch: {
  selectedValue(newVal) {
    if (newVal) {
      this.$nextTick(() => {
        this.$refs.colorAutocomplete.blur()
      })
    }
  }
}

// Vue 3 组合式API写法
import { watch, nextTick, ref } from 'vue'

const selectedValue = ref(null)
const colorAutocomplete = ref(null)

watch(selectedValue, async (newVal) => {
  if (newVal) {
    await nextTick()
    colorAutocomplete.value.blur()
  }
})

配置完成后，从下拉列表选择选项时，组件会自动失焦，立刻显示带有对应颜色图标的选中项内容，无需手动点击外部区域。

内容的提问来源于stack exchange，提问作者DrHouse82