Mit VueJS axios kann nur einmal auf die Schaltfläche geklickt werden und nach dem Empfang der Daten ist ein zweiter Klick möglich

Question

Ich arbeite an einem Like/Dislike-System für Laravel/VueJS.

Mein System funktioniert, aber ich möchte Spammer vermeiden.

Like-Button:

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

10 ist die Beitrags-ID, sie wird in Laravel Blade generiert...

So versuche ich Spammer zu vermeiden:

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

Aber hier fehlt etwas, oder ich mache etwas falsch. Wenn ich sehr, sehr schnell auf ein ähnliches Symbol klicke und die Anfragen überprüfe, sendet Axios 3-4-5 Anfragen (je nachdem, wie schnell Sie klicken)

Erst nach 3-5 Anfragen data.allowed 才会变成 false. Warum? Ich möchte:

1. allow = wahr;
2. Benutzerklick -> erlaubt = false; >Zweiter Klick „Sie können nicht erneut klicken, da die vorherige Benachrichtigung nicht beendet wurde“;
Ende der letzten Benachrichtigung -> erlaubt = wahr;
...Schleife

Answer 1

this.allowed = false； 会一直被调用，直到 API 调用完成，这样您就可以在这段时间内发送更多垃圾邮件。 验证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;
       })
        ....