假设当组件加载时我发出一个异步请求。该组件还有一个提交按钮,用户可以按下该按钮来触发依赖于原始请求结果的函数。如何延迟执行触发的函数,直到异步请求完成?
如果这没有意义,让我举个例子。 MyComponent 在 mounted 上发出异步请求 getRandomColor()。 MyComponent 的模板有 <button @click="handleClick">。 handleClick 调用一些函数 saveColor()。如何确保在异步 getRandomColor() 完成之前不会调用 saveColor()?
我目前正在使用 Vue.js,但我认为这个问题适用于所有 javascript。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
您可以通过在按钮元素中添加
:disabled属性来实现此目的。:disabled的值将基于响应。即,如果有响应,则启用它,否则禁用。工作演示:
const app = Vue.createApp({ el: '#app', data() { return { buttonText: 'Call Me!', apiResponse: [], isDisabled: false } }, methods: { saveColor() { console.log('saveColor method call'); } }, mounted() { axios.get("https://jsonplaceholder.typicode.com/users").then(response => { this.apiResponse = response.data; // Here we are getting proper response. hence, button is getting enabled. }).catch((error) => { console.warn('API error'); }); } }) app.mount('#app')