Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

finchy70's avatar

Close a Vue modal after form submission

I have a small modal to add some data to a table. When the data is successfully submitted I want to close the modal.

<template>
    <div>
        <div class="modal fade" tabindex="-1" id="addFlashModal" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <form @submit.prevent="submitForm()">
                        <div class="modal-header">
                            <h5 class="text-uppercase">Add New Ticker Message</h5>
                            <br>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body p-3">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="New Ticker Message" v-model="newMessage">
                            </div>

                            <button class="button-top btn btn-bold btn-block btn-primary" type="submitForm()">
                                Save
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "addFlash",
        data() {
            return {
                newMessage: "",
                errors: [],
            }
        },
        methods: {
            submitForm() {
                axios.post('/api/new-ticker-message', {
                    message: this.newMessage
                }).then(resp => {
                    /** Code here to close modal*/
                }).catch(error => {
                    this.errors = error.response.data.errors
                    console.log("Errors= " + this.errors)
                })
            }
        }

    }
</script>

<style scoped>
    .modal {
        color: black;
        max-width: 100% !important;
    }
</style>

I have used location.reload() but this refreshes the page.

I also tried this.$emit('hide', true); and added a v-if to the component. This does close the modal bu the background remains faded and un selectable.

Thanks Paul.

0 likes
2 replies
finchy70's avatar
finchy70
OP
Best Answer
Level 12

Fixed it. Adding $('#addFlashModal').modal('hide'); did the trick.

1 like
SunnyTechie's avatar

Please where did you add $('#addFlashModal').modal('hide'); I'm currently experiencing the same issue

Please or to participate in this conversation.