Как ограничить спам как кнопка в Vue / Laravel

Question

Проблема в том, что если вы последовательно нажимаете быстро несколько раз, номер голосования go сходит с ума на внешнем интерфейсе (бэкэнд в порядке, потому что это просто операция присоединения (голосования) и отсоединения (отмены)).

Пользователь может проголосовать и отклонить, если ранее проголосовал.

кнопка в лезвии:

<vote 
    :votes="{{ $question->votes()->count() }}"
    :question="{{ $question->id }}"
    :voted="{{ $question->currentUserVoted() ? 'true' : 'false' }}"
></vote>

Компонент vue:

<template>
    <span>
        <a href="#" v-if="isVoted" @click.prevent="voteDown(question)">
            <i class="fas fa-caret-up fa-3x text-primary vote-effect vote-up-effect"></i>
        </a>
        <a href="#" v-else @click.prevent="voteUp(question)">
            <i class="fas fa-caret-up fa-3x vote-gray vote-effect"></i>
        </a>
        <span class="vote-count-post "><strong>{{ this.votes }}</strong></span>
    </span>
</template>

<script>
    export default {
        props: ['question', 'voted', 'votes'],

        data: function() {
            return {
                isVoted: '',
            }
        },

        mounted() {
            this.isVoted = this.isVote ? true : false;
        },

        computed: {
            isVote() {
                return this.voted;
            },
        },

        methods: {
            voteUp(question) {
                axios.post('/voteup/'+question)
                    .then(response => this.isVoted = true, this.votes = this.votes + 1)
                    .catch(response => console.log(response.data));
            },

            voteDown(question) {
                axios.post('/votedown/'+question)
                    .then(response => this.isVoted = false, this.votes = this.votes - 1)
                    .catch(response => console.log(response.data));
            }
        }
    }
</script>

Answer 1

Вы можете использовать @click.once

<template>
    <span>
        <a href="#" v-if="isVoted" @click.once="voteDown(question)">
            <i class="fas fa-caret-up fa-3x text-primary vote-effect vote-up-effect"></i>
        </a>
        <a href="#" v-else @click.once="voteUp(question)">
            <i class="fas fa-caret-up fa-3x vote-gray vote-effect"></i>
        </a>
        <span class="vote-count-post "><strong>{{ this.votes }}</strong></span>
    </span>
</template>