Vue js how to prevent button clicked on two times continuously

Question

I have a button, user can click the button more than one time if he want. But when the user click the button, he might accidentally click twice, in such cases second click should be blocked by the code.

If I further explain. They should be a small delay between two clicks.

How do I achieve this using vue js?

In Vue docs Event modifiers I found .stop

<button @click.stop="myFunction">Increase</button>

Does this do the job what I want?

Answer 1

No, the .stop modifier does not solve your problem. What that modifier does is to prevent event propagation (it is equivalent to stopPropagation() in plan JavaScript)

You could use the .once modifier to prevent any further events after the first one. However, if you want to allow multiple clicks, but have a delay between them, you could do something like this:

<template>
    <button :disabled="disabled" @click="delay">Increase</button>
</template>

<script>
  export default {
    data () {
      return {
        disabled: false,
        timeout: null
      }
    },
    methods: {
      delay () {
        this.disabled = true

        // Re-enable after 5 seconds
        this.timeout = setTimeout(() => {
          this.disabled = false
        }, 5000)

        this.myFunction()
      },
      myFunction () {
        // Your function
      }
    },
    beforeDestroy () {
     // clear the timeout before the component is destroyed
     clearTimeout(this.timeout)
    }
  }
</script>