Currently, I am working on creating a custom button component that includes a spinner. The functionality works well - the button gets disabled and displays a spinner upon click. However, I am facing issues when it comes to resetting the button's state once the loading process is completed.
This is my present code structure:
Parent.vue
<template>
<custom-button @button-click="requestAPI" :disabled="canRequestAPI">
Request API
</custom-button>
</template>
<script>
methods: {
async requestAPI(){
// Make API request here
}
</script>
CustomButton.vue
<template>
<button :disabled="disabled || loading" @click="processClick" :loading="loading">
<img src="/loader.svg" />
<span class="buttonContent">
<slot />
</span>
</button>
</template>
<script>
props: ["disabled"],
data() {
return: {
loading: false,
}
},
methods: {
processClick(){
this.$emit('button-click');
this.loading = true;
}
}
</script>
Although the spinner shows up and the API request is made successfully, I'm struggling to figure out how to stop the spinner efficiently. One solution could be to create a prop for watching and setting loading to false, but I would prefer a method that allows me to reuse this custom button without cluttering the code with different variables.
Ideally, I would like to implement something like this:
Parent.vue
<script>
methods: {
async requestAPI(e){
// Make API request here
e.stopLoading();
}
</script>
CustomButton.vue
<script>
methods: {
stopLoading(){
this.loading = false;
}
}
</script>