How to use a bootstrap dialog as a vueJs component?

Question

I would like to show and hide a bootstrap modal dialog where this dialog is a vue component that I can customize its constant (message, buttons) using props.

I use v-if='show' to show it, but the problem is that I cannot set show to false when the modal is closed by clicking on the modal backdrop. As a result the dialog shows once but when it's closed, it does not show again when I press a second time on delete button.

I have one vue.js component called 'person' that copntains another component 'confirm-delete' as follows:

Person.vue:

<template>
    <div>
        <confirm-delete v-if="show" :msg="deleteMsg"></confirm-delete>
        <!-- person details -->
        <button @click="confirmDelete">
            <span class="glyphicon glyphicon-trash"></span>
        </button>
    </div>
</template>

<script>
export default {
    data () {
        return {
            show: false,
            deleteMsg: ''
        }
    },
    methods: {
        confirmDelete () {
            this.show: true,
            this.deleteMsg: 'Are you sure you want to delete this person?'
        }
    }
}
</script>

ConfirmDelete.vue:

<template>
    <div id="modalDelete" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="media-body">
                    <p>{{msg}}</p>
                </div>
            </div>
        </div>
    </div>
<template>

<script>
    export default {
        props: ['msg'],

        mounted: function(){
            $('#modalDelete').modal('show')
        }
    }
</script>

Of course if I use only one component by including the code of the dialog into person, this works. But my goal is to reuse this dialog component into other parts of my app.

Any idea how I can do this?

Answer 1

I would add a ref attribute to your confirm-delete component tag in your Person.vue template, and then give ConfirmDelete.vue a show method, which simply fires the bootstrap method. That way you can trigger the bootstrap method from your confirmDelete method in the parent via this.$refs.modal.show(). More info on refs.

Person.vue:

<template>
    <div>
        <confirm-delete ref="modal" :msg="deleteMsg"></confirm-delete>
        <!-- person details -->
        <button @click="confirmDelete">
            <span class="glyphicon glyphicon-trash"></span>
        </button>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                show: false,
                deleteMsg: ''
            }
        },
        methods: {
            confirmDelete () {
                this.$refs.modal.show();
                this.deleteMsg: 'Are you sure you want to delete this person?'
            }
        }
    }
</script>

ConfirmDelete.vue:

<template>
    <div id="modalDelete" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="media-body">
                    <p>{{msg}}</p>
                </div>
            </div>
        </div>
    </div>
<template>

<script>
    export default {
        props: ['msg'],
        methods: {
            show: function() {
                $('#modalDelete').modal('show')
            },
        }
    }
</script>