Vuetify 3中v-text-field条件绑定append-icon不显示问题求助

你的问题出在**append-icon的绑定方式**上：你现在绑定的是字符串'mdiEye'/'mdiEyeOff'，但@mdi/js导出的是SVG路径变量，并非Vuetify默认支持的字体图标名称标识，所以无法正确渲染图标。

解决方法：使用append插槽自定义图标 #

直接利用v-text-field的append插槽，用你已经验证可行的<v-icon>组件来渲染@mdi/js的SVG路径，代码修改如下：

模板部分 #

<v-text-field
  class="mt-1"
  v-model="key"
  counter
  maxlength="80"
  hide-details="auto"
  variant="outlined"
  readonly
  :type="show1 ? 'text' : 'password'"
>
  <template #append>
    <v-icon @click="show1 = !show1">
      {{ show1 ? mdiEye : mdiEyeOff }}
    </v-icon>
  </template>
</v-text-field>

脚本部分保持不变 #

<script setup>
import { ref } from 'vue'
import { mdiPlus, mdiMinus, mdiLinkBoxVariantOutline, mdiEye, mdiEyeOff  } from '@mdi/js';

let key = ref("ffffffdddddssss3333333")
let show1 = ref(false)
</script>

这样修改后，点击图标的交互逻辑和你预期的一致，同时能正确显示@mdi/js提供的SVG图标。

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