Upload multiple dynamic files with vue

Question

I know this question have been asked a lot but most of them are how to upload multiple images without knowing which image belongs to which data. I get that we can't bind v-model to input file so i tried doing it another way but this also doesn't work. Checking the vue console, the v-model file is empty.

Vue

<div class="row mt-2" v-for="(new_member,index) in new_members" :key="index">
    <div class="col-md-4">
        <label>NAME</label>
        <input class="form-control" type="text" v-model="new_member.name" required/>
    </div>
    <div class="col-md-4">
        <label>POSITION</label>
        <input class="form-control" type="text" v-model="new_member.position" required/>
    </div>
    <div class="col-md-4">
        <label>IMAGE</label>
        <input type="file" @change="onFileChange(index,$event)" name="file" ref="fileInput" required/>
    </div>
</div>
<button class="btn btn-primary col-md-2 col-12 rounded-0 float-right"  @click.prevent="addMoreMember()">ADD MORE</button>

<script>
data(){
    return{
        new_members:[{
            name:'',
            position:'',
            file:''
        }]
    }
},
methods:{
    addMoreMember(){
        this.new_members.push({name:'',position:'',file:''})
    },
    onFileChange(index,$event) {
        this.new_members[index].file =  $event.target.files[0]
    },
}
</script>

tony19 · Accepted Answer · 2022-07-15 01:45:25Z

1

A calculated guess tells me that Vue is not detecting these object changes. See https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

You can use Vue.set in the documentation to add a reactive property, or try:

onFileChange(index,$event) {
   const member = this.new_members[index];
   this.new_members.splice(index, 1, {
      ...member,
      file: $event.target.files[0]
   });
},

edited Jul 15, 2022 at 1:45

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 10, 2020 at 4:28

Jasmonate

7521 gold badge8 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Upload multiple dynamic files with vue

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related