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>