My Vue component to display a modal is like this :
<template>
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
...
<a href="javascript:">
<img v-if="image == ''" :src="'https://myshop.co.id/img/no-image.jpg'" alt="" class="img-responsive">
<img v-else :src="image" alt="" class="img-responsive" />
</a>
...
<input type="file" v-on:change="changeImage">
...
</div>
</div>
</div>
</template>
<script>
export default{
...
data() {
return {
image: '',
...
}
},
methods: {
changeImage($event) {
const selectedImage = $event.target.files[0]
const form = new FormData();
form.append('file', selectedImage);
// define the done handler
const onDone = (data) => {
if (!$.trim(data)) {
alert('No response');
}
else {
var files = $event.target.files || $event.dataTransfer.files
if (!files.length)
return;
this.createImage(files[0])
this.imageChanged = data
this.disabled = 0
}
}
// define th post options
const options = {
url: window.Laravel.baseUrl+'/product/addImage',
type: "POST",
data: form,
enctype: 'multipart/form-data',
processData: false, // tell jQuery not to process the data
contentType: false // tell jQuery not to set contentType
}
// submit the image
$.ajax(options).done(onDone);
},
createImage(file) {
var image = new Image()
var reader = new FileReader()
var vm = this
reader.onload = (e) => {
vm.image = e.target.result
};
reader.readAsDataURL(file)
},
}
}
</script>
When the modal shows, it will display a file input.
If I upload image using the file input, it will display that image in the HTML.
When I close the modal and re-open it, the image is still displayed.
I want to reset the input data in the modal so that when I open the modal again, the image will disappear.
How can I do it?