[Vuejs]-VueJS axios allow to click button only once, second time allow after data received

by

1👍

✅

    like: function (id, event) {
        // first, check if the `like` can be sent to server
        if (!this.allowed) return;
        // remember that we are sending request, not allowed to `like` again
        this.allowed = false;

        var self = this;  // you need this to remember real this
        axios.post('/posts/' + id + '/like', {  
            post_id: id,
        }).then((response) => {
            ..... code ....

            // send notification to user
            Vue.toasted.show('Bla bla bla successfuly liked post', {
                duration: 2000,
                onComplete: function () {
                    //After notification ended, user gets permission to like/dislike again.
                    self.allowed = true;
                }
            );
       }).catch(function() {
            // maybe you also need this catch, in case network error occurs
            self.allowed = true;
       })
        ....
👤shawn

1👍

The this.allowed = false; is beeing called until the API call finish so you can spam more within that time.
Set it to false immediately after the comprobation if (this.allowed).

if (this.allowed) {
    this.allowed = false; // Then do the call
}
👤Woohaik

1👍

for me works, @click.once

<q-btn
@click.once ="selectItemFiles(options)"
/>

No matter how many times the user clicks, the action will be produced only one time

👤Elton Souza

Leave a comment