Vue 模态框 取消/提交后清除数据

代码

 mounted(){
            // 隐藏模态框 清空内容
            $('#modal-send-message').on('hidden.bs.modal', function (){
                document.getElementById("form").reset();
                //$('#message_text').val("");
            });
        }

完整代码

<template>
    <div>
        <button
                class="btn btn-success float-right"
                @click="showSendMessageFrom"
        >发送私信
        </button>
        <div class="modal fade" id="modal-send-message" tabindex="-1" role="dia1og">
            <form id="form">
                <div Class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 Class="modal-title">
                                发送私信
                            </h4>
                            <button type="button" class="close" data-dismiss= "modal" aria-hidden="true" >&times;</button>
                        </div>
                        <div class= "modal-body">
                            <textarea id="message_text" name="body" class="form-control" rows="5" v-model="body" v-if="!status"></textarea>
                            <div class="alert alert-success" v-if="status">
                                <strong>私信发送成功</strong>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default " data-dismiss= "modal" >关闭</button>
                            <button type="button" class="btn btn-primary" @click="store">确认发送</button>
                        </div>
                    </div>
                </div>
            </form>

        </div>
    </div>
</template>
<script>
    export default {
        name: 'SendMessage',
        props: ['user'],
        data(){
            return {
                body: '',
                status: false
            }
        },
        methods: {
            store(){
                axios.post('/api/message/store',{'user':this.user,'body':this.body}).then(res => {
                    this.status = res.data.status

                    let that = this;
                    

                    setTimeout(function() {


                        $('#modal-send-message').modal('hide')
                        that.status = false

                    },1000)

                })

            },
            showSendMessageFrom(){
                $('#modal-send-message').modal('show')
            }
        } ,
        mounted(){
            // 隐藏模态框 清空内容
            $('#modal-send-message').on('hidden.bs.modal', function (){
                document.getElementById("form").reset();
                //$('#message_text').val("");
            });
        }
    }
</script>

<style lang="css" scoped>
    .float-right{
        float: right;
    }
</style>

参考

https://blog.csdn.net/gaojun15173/article/details/81674108

基础知识

下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用

事件	描述	实例
show.bs.modal	在调用 show 方法后触发。	$('#identifier').on('show.bs.modal', function () { // 执行一些动作... })
shown.bs.modal	当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。	$('#identifier').on('shown.bs.modal', function () { // 执行一些动作... })
hide.bs.modal	当调用 hide 实例方法时触发。	$('#identifier').on('hide.bs.modal', function () { // 执行一些动作... })
hidden.bs.modal	当模态框完全对用户隐藏时触发。	$('#identifier').on('hidden.bs.modal', function () { // 执行一些动作... })