VueJS axios 只允许点击一次按钮，第二次允许在接收到数据后答案

【问题标题】：VueJS axios allow to click button only once, second time allow after data receivedVueJS axios 只允许点击一次按钮，第二次允许在接收到数据后
【发布时间】：2021-12-21 10:54:18
【问题描述】：

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

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

【问题讨论】：

标签： javascript laravel vue.js axios

【解决方案1】：

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

【讨论】：

【解决方案2】：

对我来说有效，@click.once

<q-btn
@click.once ="selectItemFiles(options)"
/>

无论用户点击多少次，动作只会产生一次

【讨论】：

【解决方案3】：

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

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

【讨论】：