VueJS axios 允许仅单击按钮一次，收到数据后允许第二次单击

Question

我正在 Laravel/VueJS 上做喜欢/不喜欢系统。

我的系统可以运行，但我想避免垃圾邮件发送者。

点赞按钮：

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

10是post id，它是在laravel Blade中生成的...

这是我试图避免垃圾邮件发送者的方法：

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

但是这里缺少一些东西，或者我做错了什么。当我非常非常快地单击类似图标并检查请求时，axios 发送 3-4-5 个请求（取决于您单击的速度）

只有在 3-5 个请求之后 data.allowed 才会变成 false。为什么？我想要：

1. 允许= true；
2. 用户点击 -> allowed = false; >第二次点击“您不能再次点击，因为之前的通知尚未结束”；
3. 上一个通知结束 -> allowed = true;
4. ...循环

Answer 1

this.allowed = false； 会一直被调用，直到 API 调用完成，这样您就可以在这段时间内发送更多垃圾邮件。 验证if(this.allowed)后立即将其设置为false。

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

Answer 2

雷雷