Vuetify中prepend-inner插槽isFocused在v-if中失效问题求助

问题原因 #

直接在v-icon组件上绑定v-if时，受Vuetify插槽的DOM处理逻辑影响，条件判断没有正确触发DOM的添加/移除操作；而原生<div>元素不受此影响，所以能根据isFocused状态正确显示内容。

解决方案 #

有两种可行的修复方式：

方式一：用原生容器包裹v-icon，将v-if移到容器上

<template>
  <v-autocomplete :items="items" v-model="selectedItems">
    <template #prepend-inner="{ isFocused }">
      <div v-if="isFocused">
        <v-icon>mdi-magnify</v-icon>
      </div>
    </template>
  </v-autocomplete>
</template>

方式二：改用v-show替代v-if

v-show通过控制元素的display属性实现显示/隐藏，不会涉及DOM节点的添加/移除，更适配Vuetify组件在插槽中的渲染逻辑：

<template>
  <v-autocomplete :items="items" v-model="selectedItems">
    <template #prepend-inner="{ isFocused }">
      <v-icon v-show="isFocused">mdi-magnify</v-icon>
    </template>
  </v-autocomplete>
</template>

补充说明 #

你能通过<div>正确获取isFocused状态，说明插槽的作用域变量传递是正常的，问题仅出在v-icon组件与v-if的结合使用上，上述两种方式都能解决这个问题。

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