VueJS axios では、ボタンのクリックは 1 回のみ許可され、データを受信した後に 2 回目のクリックが許可されます

Question

私は Laravel/VueJS で好き嫌いシステムを開発しています。

私のシステムは動作していますが、スパマーを避けたいと思っています。

いいねボタン:

リーリー

10 は、laravel Blade で生成される投稿 ID です...

これが私がスパマーを避ける方法です:

リーリー

しかし、ここには何かが欠けているか、何か間違ったことをしています。同様のアイコンを非常に素早くクリックしてリクエストを確認すると、axios は 3-4-5 リクエストを送信します (クリックの速さに応じて)

3 ～ 5 回のリクエストの後のみ、data.allowed は false になります。なぜ？欲しい：＃＃＃

allow=true;
ユーザーのクリック -> allowed = false; >2 回目のクリック "前の通知がまだ終了していないため、再度クリックすることはできません";
最後の通知の終わり -> allowed = true;
3. ＃＃＃...サイクル＃＃＃

Answer 1

this.allowed = false; は API 呼び出しが完了するまで呼び出され、その間にさらにスパムを送信できるようになります。 if(this.allowed) を検証した直後に、これを false に設定します。

if (this.allowed) {
    this.allowed = false; // 次に呼び出しを実行します
}

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