I have a Vue component structured like this:
<template>
...
<b-modal id="modalInvoice" size="lg" title="Invoice">
<Invoice/>
<div slot="modal-footer" class="w-100">
<b-btn size="sm" class="float-right" variant="warning" @click="show=false">
<i class="fa fa-print"></i> Print
</b-btn>
</div>
</b-modal>
...
<b-btn variant="warning" class="btn-square mt-2" v-b-modal.modalInvoice @click="checkout()"><i class="fa fa-credit-card-alt"></i>Checkout</b-btn>
...
</template>
<script>
...
export default {
...
methods: {
checkout() {
var request = new Request(ApiUrl.orders, {
method: 'post',
body: JSON.stringify(this.$session.get(SessionKey.Cart)),
headers: new Headers({
'Authorization': 'bearer ' + this.$session.get(SessionKeys.ApiToken),
'Content-Type': 'application/json'
})
});
fetch(request).then(r=> r.json())
.then(r=> {
this.items = r.data
// Show modal here
})
.catch(e=>console.log(e));
}
}
}
</script>
Currently, the modal shows immediately when clicking the checkout button. I would like it to only show after the AJAX response is successful.
How can I achieve this behavior?