vue.js - How can I display modal in modal on vue component?

Question

My view blade like this :

<a href="javascript:" class="btn btn-block btn-success" @click="modalShow('modal-data')">
    Click here
</a>

<data-modal id="modal-data"></data-modal>

If the button clicked, it will call dataModal component (In the form of modal)

dataModal component like this :

<template> 
    <div class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <!-- modal content data -->
            <div class="modal-content modal-content-data">
                <form id="form">
                    <div class="modal-body">
                        ...
                    </div>
                    ...
                    <button type="submit" class="btn btn-success" @click="add">
                        Save
                    </button>
                    ...
                </form>
            </div>
            <!-- modal content success -->
            <div class="modal-content modal-content-success" style="display: none">
                <div class="modal-body">
                    ...
                </div>
            </div>
            <!-- modal content failed -->
            <div class="modal-content modal-content-failed" style="display: none">
                <div class="modal-body">
                    ...
                </div>
            </div>

        </div>
    </div>
</template>
<script>
    export default{
        ...
        methods:{
            add(event){
                const data = {
                    ...
                }
                this.$store.dispatch('add', data)
                .then((response) => {
                    if(response == true) 
                        this.$parent.$options.methods.modalContent('#modal-data', '.modal-content-success')
                    else              
                        this.$parent.$options.methods.modalContent('#modal-data', '.modal-content-failed')
                })
                .catch(error => {
                    console.log('error')
                });
            }
        }
    }
</script>

If response = true then modal with class = modal-content-success will appear

If response = false then modal with class = modal-content-failed will appear

I want if response = false, modal with class = modal-content-data still showing. So modal with class = modal-content-failed appears in modal with class class = modal-content-data

How can I do that?

How to order that when response = false, modal with class = modal-content-data still appear?

Please help me

Answer 1

As i can see you are using bootstrap, this worked for me:

<template>
    <div>
        <div id="modal-example" class="modal" tabindex="-1" role="dialog">
            ...insert rest of code here as is in your example
        </div>
    </div>
</template>

And then in your href link tag:

<a href="javascript:void(0)" class="btn btn-block btn-success" data-target="#modal-example" data-toggle="modal">
Show Modal
</a>