Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

oroalej's avatar

How to add delay on @click to prevent multiple click

Hi,

The title say it all.

The @click is for a like button. I just want to prevent the double clicking.

0 likes
3 replies
click's avatar
click
Best Answer
Level 35

It depends on what you do next but you could set a variable:

// disable the button if clicked = true
<button @click="doSomething" :disabled="clicked">LIKE</button>


// your vuejs code
data: function() {
    return {
         clicked: false,
    }
},
methods: {
    doSomething: function() {
       // we only continue if not clicked before
       if (this.clicked) {
           return;
       }

       this.clicked = true;

       // do something to process the like

       // at some point release the 'clicked' state
       this.clicked = false;

       // or if you want to release the clicked state after a second (for whatever reason)
       setTimeout(function(){
           this.clicked = false;
       }.bind(this),1000);
    }
}

oroalej's avatar

@m-rk Thanks bro.

adding it inside of axios make it work.


axios.post(url)
     .then(resp => {
        this.clicked = false;
     }

Please or to participate in this conversation.