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.

CodePudding user response：

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