如何重置 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=''。

在 bootstrap 中，您可以通过监听 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
    })
}

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

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

modal-dialog

image-uploading

vue.js

vue-component

vuejs2