Vuetify 3中@click:append-inner事件失效及图标指针异常求助

问题复现 #

使用v-text-field组件时，配置append-inner-icon并绑定@click:append-inner事件无响应，同时鼠标悬停图标时光标未变为指针样式，代码如下：

<v-text-field 
  variant="outlined" 
  density="compact" 
  append-inner-icon="mdi-plus-box"
  @click:append-inner="addSomething"
>
</v-text-field>

核心原因与解决办法 #

1. 检查Vuetify版本 #

@click:append-inner事件是Vuetify 3.1及以上版本新增的特性，若项目使用3.1以下版本，该事件不会生效。

• 解决方案：升级Vuetify到3.1+版本，执行命令：

npm install vuetify@latest
# 或
yarn add vuetify@latest

2. 自定义append-inner插槽（兼容低版本） #

若暂时无法升级版本，可通过自定义append-inner插槽实现需求，同时手动添加点击事件和光标样式：

<v-text-field 
  variant="outlined" 
  density="compact"
>
  <template v-slot:append-inner>
    <v-icon @click="addSomething" style="cursor: pointer;">mdi-plus-box</v-icon>
  </template>
</v-text-field>

这种方式完全自定义图标元素，可确保点击事件和光标样式正常工作。

3. 样式修复（针对高版本光标问题） #

若已升级到3.1+版本但光标仍未变为指针，可通过自定义CSS强制设置：

.v-text-field__append-inner .v-icon {
  cursor: pointer;
}

内容的提问来源于stack exchange，提问作者Khalid-Supreme