我有一个Django ModelForm，它通过使用脆皮表单显示在模板中。在用户填写字段并按下Submit按钮后，将在后台使用Django的核心send_email发送一封电子邮件。
问题是对send_email的调用是同步的，因此用户必须等待加载下一个页面(成功/失败页面(，但此时用户可能会再次按下Submit按钮，这会生成多个POST，从而生成多封电子邮件。
我想使用Vue.js在用户按下按钮后使其处于非活动状态，但前提是它通过了Django的表单验证。有办法检测到这一点吗？
添加到您的按钮：disabled="！readyToSend"，其中readyToSnd可以由您的数据函数或计算比例返回。
在提交表单之前，将此变量设置为false，在从API接收数据之后，将其重置为true。
在下面的示例中，我选择readyToSend作为计算的比例，如果表单有效并且进程没有等待API响应，则返回true。
完整的代码笔示例在这里
html文件：
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>example</title>
</head>
<body>
<div id="app">
<h2>{{ message }}</h2>
<form @submit.prevent>
<input type="text" v-model="dataToSend" placeholder="Something to send">
<button type="button" :disabled="!readyToSend" @click="send">Send</button>
</form>
</div>
</body>
</html>
javascript:
var vm = new Vue({
el: '#app',
data: function(){
return {
message: "please enter your message and click on send.",
dataToSend: "",
sentAndWaiting: false,
}
},
methods:{
send: async function(){
this.sentAndWaiting = true;
// Send Data Here
this.message = "sending....";
try{
let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
let jsonResponse = await response.json();
}
catch(e){
this.message = e.message;
}
// reponse received ... do Something with it
this.reponseReceived();
},
reponseReceived: function(){
this.sentAndWaiting = false;
this.message = "Ok. Got The response.";
}
},
computed:{
readyToSend: function(){
return this.dataToSend.length > 0 && !this.sentAndWaiting;
}
},
});
在我的浏览器中，我不得不通过开发工具来测试这一点，并将我的互联网连接限制为GPRS，并禁用缓存：
屏幕截图DevTools