点击Vuetify头像内图标选文件时报v-on handler 'input' undefined错误求解

报错原因 #

你遇到的报错本质是代码尝试访问不存在的对象属性，具体有两个核心触发原因：

1. 你的v-file-input写在v-for循环内部，Vue中放在循环内的ref会被处理为数组，而非单个组件实例，直接访问this.$refs.file拿到的是数组，自然找不到下属的$refs.input属性
2. 你点击的图标同时绑定了v-menu的激活事件和自定义的fileSelect点击事件，事件冲突也可能导致执行时序异常，组件未完成渲染就尝试访问内部属性

修复方案 #

方案1：修改现有逻辑适配规则 #

1. 调整点击事件修饰符，阻止事件冒泡冲突
   把图标绑定的点击事件修改为：

<v-icon class="pb-5" aria-hidden="true" @click.stop="fileSelect()" color="grey lighten-5" size="20" v-bind="attrs" v-on="on" style="position: absolute; bottom:0; right: 29px;"> mdi-camera </v-icon>

2. 修改fileSelect方法，适配循环内ref的数组特性，同时增加存在性判断避免报错：

methods:{
  fileSelect () {
    // 循环内ref为数组，取第一个有效实例
    if (this.$refs.file?.[0]) {
      // 优先调用组件内置click方法，兼容性更好
      this.$refs.file[0].click()
      // 上述方法无效可替换为下面的原生DOM查找方式
      // this.$refs.file[0].$el.querySelector('input').click()
    }
  }
}

方案2：替换为原生输入框（更稳妥） #

如果不需要用到v-file-input的特殊能力，直接用原生隐藏文件输入框可以完全避开Vuetify组件内部结构差异问题：

1. 替换原有v-file-input代码：

<input type="file" style="display:none" ref="nativeFile" accept="image/*" @change="uploadProfile">

2. 修改fileSelect方法：

methods:{
  fileSelect () {
    this.$refs.nativeFile.click()
  }
}

上传逻辑可以在uploadProfile方法中通过事件参数e.target.files拿到选中的文件即可。

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