Although this question has been asked frequently, most of the answers do not address a key issue - how to upload multiple images while knowing which image belongs to which data. Attempting to bind v-model to input file doesn't work as expected, and even when trying another approach, the vue console shows that 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>