How to pass a reference button from v-btn onclick method?

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.

Leave a Comment

Your email address will not be published.

Scroll to Top