How can I reset input data on the modal in vue.js 2?

Question

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?

Solution

Set this.image='' when the modal closes.

In bootstrap you can do this automatically when the modal closes by listening to the hidden.bs.modal event. You can clear file inputs by setting their value to null.

Add a ref attribute to your modal

<div ref="modal" class="modal" tabindex="-1" role="dialog">
...
<input ref="imageInput" type="file" v-on:change="changeImage">

And add code to listen to the event.

mounted(){
    $(this.$refs.modal).on('hidden.bs.modal', () => {
        this.image = ''
        this.$refs.imageInput.value = null
    })
}