Quiero mostrar el nombre de varios archivos en mi plantilla. Hago eso:
<div v-for="(image, index) in imagesReturn" :key="index"> <span>{{ image.name }}</span> </div> <div> <generic-input v-model="imagesReturn" type="file" multiple @change="addFiles" > add files </generic-input> </div> <script> data() { return{ imagesReturn: []; } } methods: { addFiles(e) { let selectedFiles = e.target.files; for (let img of selectedFiles) { this.imagesReturn.push(img.name); } } } </script>Quiero mostrar el nombre de los archivos en la matriz imagesReturn pero tengo un error cuando presiono dentro de la matriz error this.imagesReturn.push no es una función , no sé por qué y no puedo mostrar el nombre de los archivos en mi plantilla. Por favor gracias.
La parte js me parece bien. Supongo que el problema proviene del componente generic-input .
Por lo general, cuando se produce el error something.push is not a function , siempre significa que something no es una matriz.
Dado que imagesReturn es un enlace bidireccional que usa v-model , es posible que el componente generic-input altere imagesReturn de [] a '' (cadena vacía) o null después del montaje.
Así que le sugiero que console.log(this.imagesReturn) dentro addFiles() para ver cuándo cambia el valor (o watch imagesReturn ).
No sé si el componente generic-input pertenece a un marco de interfaz de usuario o lo crea usted mismo. Si pertenece a un marco de interfaz de usuario, debe leer detenidamente la documentación sobre el evento @change="function(params)" , especialmente sus parámetros. Si lo escribió usted mismo, debe verificar qué valor pasará en el componente cuando emit('change', value) .