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

Question

我喜欢/不喜欢拉拉维尔/VueJS的系统。

​

​

我的系统正常工作，但我想避免垃圾邮件发送者。

就像纽扣：

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

10是柱状id，它是在拉拉叶片中生成的。

为了避免垃圾邮件发送者，我试图这样做：

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

ended";

• Previous

2. =true；
3. 用户单击如->
4. = false；>单击第二次“您不允许再次单击，因为以前的通知(而不是

通知)结束了->允许=真；

1. .循环

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

Answer 2

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

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

Answer 3

对我来说，@click.once

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

无论用户单击多少次，该操作将只生成一次。