CODEWITHSUNDEEP
javascriptvue.jsbuefy
swiftie1989
swiftie1989

Reputation: 7

How to disable button after its pressed for short time or until function is comeplete

I have a submit form button that when pressed uploads an image and then brings you back to the dashboard. However is you keep pressing the button during the time it is uploading it will keep uploading the same image over and over again.

im using vue and buefy.

          <wizard-button
            v-else
            @click.native="donePressed"
            :style="props.fillButtonStyle"
          >{{props.isLastStep ? 'Done' : 'Next'}}</wizard-button>

in donePressed()

    donePressed() {
      bus.$emit('i-got-clicked', '')
    },

i assume i need to put something here but i dont know what and how to do it to the button

ideally id like to disable the button until the functions finished running but disabling it for like 3 seconds will probably be sufficient. Any help is appreciated. Thanks

Upvotes: 0

Views: 698

Answers (1)

Ohgodwhy
Ohgodwhy

Reputation: 50787

No way to know what properties wizard-button accepts, but assuming it gives you the same raw HTML props as a button does:

<wizard-button
    v-else
    @click.native="donePressed"
    :style="props.fillButtonStyle"
    :disabled="loading"
>{{props.isLastStep ? 'Done' : 'Next'}}</wizard-button>

async donePressed() {
  this.loading = true // set this before running anything
  await new Promise((resolve, reject) => {
    //do all your functions in here, then call resolve()

    resolve()
  })

  //now you can update the loading variable
  this.loading = false
}

And define the loading in your data in the component housing the <wizard-button>

Upvotes: 1

Related Questions