v-on 处理程序中的错误：“TypeError：无法读取未定义的属性（读取'输入'）答案

【问题标题】：Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'input')v-on 处理程序中的错误：“TypeError：无法读取未定义的属性（读取'输入'）
【发布时间】：2021-11-21 14:52:53
【问题描述】：

谁能帮帮我。当我单击头像中的图标时，我想选择文件。但出现错误。 v-on 处理程序中的错误：“TypeError：无法读取未定义的属性（读取'输入'）。任何人都可以帮助我...

<v-row v-for="(item, index) in list" :key="index" no-gutters>
  <v-col cols="12" sm="12" lg="12" xl="12">
    <v-card class="mt-2 rounded-xl" hover>
      <v-card-title v-if="index === 0" @mouseover="mouseOver = true" @mouseleave=" mouseOver = false">
        <v-row class="ml-1 mt-1">
          <div style="position: relative; top: 0; right: 0; width: 70px">
          <v-avatar size="60" color='primary'>
           </v-avatar>
          <v-menu offset-y v-if="mouseOver">
            <template v-slot:activator="{ on, attrs }">
              <v-icon class="pb-5" aria-hidden="true" @click="fileSelect()" color="grey lighten-5" size="20" v-bind="attrs" v-on="on" style="position: absolute; bottom:0; right: 29px;"> mdi-camera </v-icon>
               </template>
          </v-menu>
          </div>
          <div class="ml-1">{{item.text}}</div>
            <v-file-input style="display: none" ref="file" accept="image/*" v-model="systemAndTenantConfig.systemconfiguration.logo" @change="uploadProfile()"></v-file-input>
        </v-row>
    </<v-card-title>
   </v-card>
 </v-col>
 </v-row>
<script>
export default{
  data(){
    return{
    }
}
methods:{
 fileSelect () {
      this.$refs.file.$refs.input.click()
    }
}
</script>

【问题讨论】：

您在代码中的何处定义ref="input"？您尝试在您的方法中访问此ref，但我在您的模板中没有看到它。
我只是在标签中定义了 ref
您已经在<v-file-input> 元素中定义了ref="file"，但您正在尝试访问$refs.input。我不认为$refs 的工作方式与您认为的那样......
是的，我在中定义了ref="file"。点击图标时需要打开文件
详细了解$refs 的工作原理。您在这里缺少一些关键要素。键入 ...$refs.input.... 时，它假定您在代码中的任何位置都有 ref="input" ，但在您的情况下，您只有 ref="file" ，这与您的模板不对应。

标签： javascript vue.js vuetify.js

【解决方案1】：

尝试访问根元素 $el，然后使用 querySelector 定位输入并使用点击事件：

this.$refs.file.$el.querySelector('input').click()

DEMO

【讨论】：