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?

Brian Lee · Accepted Answer · 2018-09-11T05:48:09.410

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>

If use : `this.show = !this.show`, when modal is open, modal is closed again. I try change to `this.show = true` and it solved — moses toh, Sep 11 '18 at 05:40
I need you help again. Look at this : https://stackoverflow.com/questions/52285601/how-can-i-add-notification-automatic-after-add-to-cart-in-the-vue-component — moses toh, Sep 12 '18 at 04:43

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

1 Answers1