How can I ensure that the modal is triggered only after a successful axios response, without altering any existing styles? The current code triggers the modal before waiting for the axios response, despite adding v-if.
Current code:
<template>
<div>
<div class="col-12 text-center">
<a @click="func()" class="btn btn-sm btn-round btn-success save-button" data-toggle="modal" data-target="#success-save">submit</a>
</div>
<div v-if="modalDisplay" class="modal modal-top fade" id="success-save" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h3 class="text-center" style="color:white;"><strong>Success</strong></h3>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
modalDisplay: false,
}
},
methods: {
func() {
axios.post('/some/uri', {
'content': 'abc',
})
.then(response => {
this.modalDisplay = true;
});
},
}
</script>
I have attempted to adjust the positioning of v-if and other elements, but the issue persists. Your guidance on resolving this matter while maintaining the current style will be greatly appreciated. Thank you!
Edit: I'm using Vue 2.6.11 Modified the code