VueJS axios permet de cliquer sur le bouton une seule fois et autorise un deuxième clic après avoir reçu des données

Question

Je travaille sur un système J'aime/Je n'aime pas sur Laravel/VueJS.

Mon système fonctionne, mais je veux éviter les spammeurs.

Bouton J'aime :

<a v-on:click="like(10, $event)">
    <i class="fas fa-heart"></i>
</a>

10 est l'identifiant du message, il est généré dans Laravel Blade...

Voici comment j'essaie d'éviter les spammeurs :

const app = new Vue({
el: '#app',
data() {
    return {
        allowed: true,
    };
},
methods: {
    like: function (id, event) {
        if (this.allowed) {
            axios.post('/posts/' + id + '/like', {  
                post_id: id,
            })
            .then((response) => {
                this.allowed = false; //Set allowed to false, to avoid spammers.

                ..... code which changes fa-heart, changes class names, texts etc ....

                // send notification to user
                Vue.toasted.show('Bla bla bla successfuly liked post', {
                    duration: 2000,
                    onComplete: (function () {
                        this.allowed = true //After notification ended, user gets permission to like/dislike again.
                    })
                });

Mais il manque quelque chose ici, ou je fais quelque chose de mal. Lorsque je clique très très rapidement sur une icône similaire et que je vérifie les requêtes, axios envoie 3-4-5 requêtes (selon la vitesse à laquelle vous cliquez)

Seulement après 3 à 5 demandes data.allowed 才会变成 false. Pourquoi? Je veux :

1. autoriser = vrai;
2. Clic utilisateur -> autorisé = faux ; >Deuxième clic "Vous ne pouvez pas cliquer à nouveau car la notification précédente n'est pas terminée" ;
Fin de la dernière notification -> autorisé = vrai ;
...boucle

Answer 1

this.allowed = false； continuera à être appelé jusqu'à la fin de l'appel API, vous permettant d'envoyer plus de spam pendant cette période. Vérifiez if(this.allowed)后立即将其设置为false.

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

Answer 2

    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;
       })
        ....