Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'input')

Question

Can any one help me. when I click the icon inside in the avatar I want to select file.But I getting the error. Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'input'). Could Anyone Help me...

<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>

Where do you define the ref="input" in your code? You try accessing this ref in your method, but I don't see it in your template. — Narxx
– Narxx, Commented Nov 21, 2021 at 14:58
You have defined ref="file" in the <v-file-input> element, but you are trying to access $refs.input. I don't think $refs work the way you think they work... — Narxx
– Narxx, Commented Nov 21, 2021 at 15:06
Yes I have defined ref="file" in the <v-file-input>.I need to open the file when the icon is click — Maseeha Tasneem
– Maseeha Tasneem, Commented Nov 21, 2021 at 15:28
Read more about how $refs work. You are missing some key elements here. When typing ...$refs.input.... it assumes you have ref="input" anywhere in your code, but in your case you only have ref="file" , which is not corresponding with your template. — Narxx
– Narxx, Commented Nov 22, 2021 at 10:11

Boussadjra Brahim · Accepted Answer · 2021-11-21 15:10:34Z

2

Try to get access to the root element $el then target the input using querySelector and use click event :

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

DEMO

edited Nov 21, 2021 at 15:10

answered Nov 21, 2021 at 15:05

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'input')

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related