如何在 vue 上的 ajax 响应成功后显示模态？

Question

我的 vue 组件是这样的：

<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>

如果按钮checkout被点击，modal会先显示不等待响应ajax成功

我想在响应ajax成功后做出模态显示

我该怎么做？

Answer 1

使用v-model 控制模态可见性：

<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>

这样你可以在 fetch 返回时显式设置show 属性：

<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>