Vue
HTML
<div id="app">
<button @click="download">
<span v-if="!isLoading">Button</span>
<span v-else>Loading...</span>
</button>
</div>
CSS
body {
padding: 20px;
}
Vue
const myFetch = () => {
return new Promise((resolve) => {
setTimeout(() => resolve({ data: 'hello world' }), 2000);
});
}
new Vue({
el: "#app",
data: {
isLoading: false,
text: '',
},
methods: {
async download(todo) {
this.isLoading = true;
this.text = await myFetch().then(response => response.data);
this.isLoading = false;
alert(this.text)
}
}
})