How can I display modal after ajax response success on vue?

Question

My vue component 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
                    })
                    .catch(e=>console.log(e));
            }
        }
    }
</script>

If the button checkout clicked, the modal show without waiting for response ajax success first

I want to make after response ajax success, then the modal show

How can I do it?

Answer 1

Use v-model for controlling the modal visibility:

<b-modal id="modalInvoice" size="lg"  title="Invoice" v-model="show">
    <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>

This way you can explicitly set the show property when fetch returns:

<script>
    ...
    export default {
        ...
        // a data property for the v-model to bind
        data () {
            return {
                 show: false
            }
        }
        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
                        // toggle the value of show to display the modal
                        this.show = true
                    })
                    .catch(e=>console.log(e));
            }
        }
    }
</script>