如何在 vue.js 2 中重置模态上的输入数据？

Question

我用来显示模态的 Vue 组件是这样的：

<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>

当模态显示时，它会显示一个文件输入。

如果我使用文件输入上传图像，它将在 HTML 中显示该图像。

当我关闭模态并重新打开它时，图像仍然显示。

我想重置模态中的输入数据，这样当我再次打开模态时，图像就会消失。

我该怎么做？

Answer 1

this.image=''当模态关闭时设置。

在引导程序中，您可以在模式关闭时通过侦听hidden.bs.modal事件自动执行此操作。您可以通过将其值设置为 来清除文件输入null。

ref为您的模态添加属性

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

并添加代码来监听事件。

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