VueJS axios 允许仅单击按钮一次，收到数据后允许第二次单击-PHP中文网问答

我正在 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。为什么？我想要：

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

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