Alguien puede ayudarme. cuando hago clic en el ícono dentro del avatar, quiero seleccionar el archivo. Pero recibo el error. Error en el controlador v-on: "Error de tipo: no se pueden leer las propiedades de undefined (leyendo 'entrada'). ¿Alguien podría ayudarme...?
<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>Intente obtener acceso al elemento raíz $el , luego dirija la entrada usando querySelector y use el evento de clic:
this.$refs.file.$el.querySelector('input').click()