v-btn has a loading prop. You just need to define updatingService in your data and toggle it.
in your data:
data() {
return {
updatingService: false,
}
}
and change your function to:
updateService: function(event, service) {
console.log("update service, event: ", event.source, ", service: ", service);
//I want to do following:
this.updatingService = true
//after some api call
this.updatingService = false
}
It is the best practice. Any way you can use ref prop:
<v-btn ref="theBtn" v-on:click="updateService($event, service)"
:loading="updatingService" class="mr-4">
then
updateService: function(event, service) {
console.log("update service, event: ", event.source, ", service: ", service);
//I want to do following:
this.$refs.theBtn.loading = true
//after some api call
this.$refs.theBtn.loading = false
}
CLICK HERE to find out more related problems solutions.