How to prevent that button being clicked twice

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?

Anyhelp! Thanks in advanced.

No. The .stop modifier is used to stop propagation (bubbling) of the event.

What you need to do is add a flag to your function or you could even debounce the function.

Here’s an example of using a flag: https://jsfiddle.net/jamesbrndwgn/9jrqk2no/5/

1 Like

In James’ code, you could additionally deactivate the button for visual feedback:

<button @click="handleClick" :disabled="isDisabled">Click Me</button>
2 Likes

Yes, I think a lock is the pattern to go here.
Typically you have two states (locked or not locked) and two conditions (when the lock is set and when the lock is removed - which may be never).
In order to provide good user experience, you should give the user visual feedback about the state.

That makes @LinusBorg s solution preferable.

Thanks a lot. :blush:

1 Like

Thank you so much for your continued support. In this case, the flag seemed, best but maybe there was a vue native functionality to take care of this… When @LinusBorg makes the suggestion, it tends to be the best practice.