In this tutorial we're going to learn how you can create a deletion confirmation modal in VueJS. This technique is important when you have a form or a link asking the user to delete some content, you can display this confirmation modal for the user to confirm before you delete the record.

From the image above we want the confirmation modal to appear when we click the delete button.

When the user clicks the delete button again then we want to make this delete the post. First we need to add the HTML to the page.


<div id="app">
    <h1>Delete The Post?</h1>

    <div class="alert alert-danger" v-show="showMessage">
        <p>Post has been deleted</p>
    </div>

    <p>
        <button class="btn btn-danger" @click="showModal = true">Delete</button>
    </p>

    <confirmation-box v-show="showModal" @close="showModal = false"></confirmation-box>
</div>

First we have the title of the page, after this we have the HTML for the notification box, we're using the Vue directive of v-show that will show or hide the element depending on the boolean value of the data property. In this example if showMessage is false the notification box is hidden, if it's true the notification will be shown. Next we add the delete button, you'll notice it has an attribute of @click this is the shorthand version of attaching a click event used instead of v-on:click. On the click event of the delete button we're setting the showModal data property to true. The next element is the custom Vue component confirmation-box, this is what we're going to create later on in the tutorial. This element has a couple of Vue directives, v-show and @close. v-show is used by the showModal variable to display or hide the confirmation box and set this from the delete button. The @close is the shorthand for v-bind:close where we bind a close event, from here we're going to set the showModal data property to false.

Building The Confirmation Component

To build the new component we need to use the Vue method .component.


Vue.component('confirmation-box', {
    template: '#modal-template',
    methods: {
        confirmation: function()
        {
            this.$parent.confirmationDelete();
        }
    }
});

This will create a new component where we can use the tag confirmation-box, the HTML for this component is being referred to by #modal-template. There are methods attached to the confirmation box, this is confirmation, inside this method we need to call a parent method of confirmationDelete which is where we can actually delete the record. Now we can build the #modal-template.


<script type="text/x-template" id="modal-template">
    <transition name="modal">
        <div class="modal-mask">
            <div class="modal-wrapper">
                <div class="modal-container">

                    <div class="modal-header">
                        <h2>Are you sure you want to delete?</h2>
                    </div>

                    <div class="modal-footer">
                        <button class="btn btn-danger" v-on:click="confirmation">Delete</button>
                        <button class="btn btn-primary" v-on:click="$emit('close')">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</script>

The first element of this template is transition with the name modal. The transition element tells Vue to add entering and leaving transitions, these are added whenever using the following: - Conditional rendering (using v-if)

Conditional display (using v-show)
Dynamic components
Component root nodes

Visit the VueJS Transitions tutorial to learn more. Back to the model-template, we build the HTML for the modal box, the important points to notice is the Delete button and the Cancel button. For the delete button we want to run the parent confirmationDelete function and the cancel button needs to just close the modal box. On the delete button click event we call on the confirmation method, if you remember on the component this in turn will call the parent confirmationDelete function, which is used to actually delete the record. The cancel button works in a different way, it will use the $emit API which will call a registered event. In this example we call the close event, from the Vue component the close event will set the showModal to false and therefore hide the modal box. With the modal code complete we need to build the base Vue object and include the method confirmationDelete on this object.


var app = new Vue({
    el: '#app',
    data: {
        showModal: false,
        showMessage: false
    },
    methods: {
        confirmationDelete: function()
        {
            // Call API to delete the record
            this.showModal = false;
            this.showMessage = true;
        }
    }
});

From the original HTML we had two v-show directives using data properties of showModal and showMessage, therefore we need to make sure these are added. Next we add the method confirmationDelete, this is where we will call the API to delete the record, I haven't included this on the example as your API call will be custom to your application. Then we hide the modal box by setting the showModal to false and display the message by setting showMessage to true.

VueJS - Building A Confirmation Modal

Building The Confirmation Component