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

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>