I wan't to display multiple files name in my template i'm do that:
<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>
Iwant to display files name in array imagesReturn but i have error when i push inside array error this.imagesReturn.push is not a function i don't know why and i can not display files name in my template. Please thank you.
The js part seems fine to me. I guess the problem goes from the generic-input component.
Typically, when the error something.push is not a function occurred, it always means something is not an Array.
Since imagesReturn is two-way binding using v-model, it is possible that the generic-input component alters imagesReturn from [] to ''(empty string) or null after mounted.
So I suggest you console.log(this.imagesReturn) inside addFiles() to see when the value changes (or watch imagesReturn).
I don't know if the generic-input component belongs to a UI framework or is created by yourself. If belongs to a UI framework, you need to read the documentation carefully about @change="function(params)" event, especially its params. If it's wrote by yourself, you need to check what value it will pass in the component when emit('change', value).