Добавить к вашей кнопке: disabled = "! ReadyToSend", где readyToSend может быть возвращен вашей функцией данных или вычисленным свойством.
Перед отправкой формы установите эту переменную в false, после получения данных от вашего API сбросьте его на true.
В следующем примере я решил сделать readyToSend вычисляемый proporty, где он будет возвращать true, если форма верна и если процесс не ожидает ответа API.
Полный пример Code Pen здесь
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;
}
},
});
в моем браузере я должен был проверить это, перейдя в инструменты разработчика и ограничив мое inte rnet подключение к GPRS и отключив кеш:
Screenshot DevTools