Can anyone help me? When I click the icon inside the avatar, I want to select a file. But I'm getting an 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>