javascript - 如何在 vue 上的 ajax 响应成功后显示模态?
问题描述
我的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>
如果按钮结帐点击,模态显示不等待响应 ajax 先成功
我想在响应ajax成功后做出,然后模态显示
我该怎么做?
解决方案
用于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>
这样,您可以show
在 fetch 返回时显式设置属性:
<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>
推荐阅读
- javascript - 使用 CryptoJS 方法对对象进行数字签名?
- android - ReyclerView 项目列表中项目之间的巨大差距
- javascript - 将数据从网站发送到 C# Forms 应用程序
- python - 在文件开头使用 os.chdir(os.path.dirname(__file__)) 是一个好习惯吗?
- xcode - 是什么让 Xcode Command-Click(代码索引)停止工作?
- c++ - 为什么我们可以创建一个模板类结构,其参数数量与声明结构时指定的参数不同?
- python - 如何为在单独的 docker 容器中运行的 jupyter notebook 设置 django shell 内核
- java - 如何使用 Java 和 JNI 为 SAP-GUI 脚本的那部分创建方法?
- c# - 一对一关系字段在剃刀详细信息页面(实体框架)上导致 NullReferenceException
- java - 设计模式多功能对一功能对多功能实现