I am new to VueJS and I was trying to upload multiple pictures. The form looks like . I am using Vue from CDN on a blade file. The problem is when I click delete, it is not the one clicked which is removed, but the last one. I have noticed that the one clicked is actually removed from the data, but the form doesn’t update like that. Any help is appreciated. My code looks like this:
Vue.createApp({
data() {
return {
images: []
}
},
methods: {
addField(images){
images.push({});
},
removeField(index, images){
images.splice(index, 1);
}
}
}).mount('#picture')
<input id="picture" type="file"
class="form-control-file{{ $errors->has('picture') ? ' is-invalid' : '' }}"
name="picture[]" accept="image/*" required>
@if ($errors->has('picture'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('picture') }}</strong>
</span>
@endif