0
300
VistasVueJS axios permite hacer clic en el botón solo una vez, la segunda vez permite después de recibir los datos
Estoy haciendo un sistema de me gusta/no me gusta en Laravel/VueJS.
Mi sistema funciona, pero quiero evitar los spammers.
Botón "me gusta:
<a v-on:click="like(10, $event)"> <i class="fas fa-heart"></i> </a>10 es ID de publicación, se genera en laravel blade ...
Esto es lo que traté de hacer para evitar los spammers:
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. }) });Pero falta algo aquí, o estoy haciendo algo mal. Cuando hago clic muy, muy rápido en el ícono Me gusta y verifico las solicitudes, axios envía 3-4-5 solicitudes (depende de qué tan rápido haga clic)
Y solo después de eso, 3-5 solicitudes data.allowed se vuelven false . ¿Por qué? Yo quiero:
- permitido = verdadero;
- El usuario hace clic como -> permitido = falso; > hace clic por segunda vez "No puede volver a hacer clic porque la notificación anterior no finalizó";
- La notificación anterior finalizó -> permitido = verdadero;
- ... círculo
3 Respuestas
Responde la pregunta0
this.allowed = false; se está llamando hasta que finalice la llamada API para que pueda enviar más spam dentro de ese tiempo. Establézcalo en false inmediatamente después de la comprobación if (this.allowed) .
if (this.allowed) { this.allowed = false; // Then do the call }0
para mí funciona, @click.once
<q-btn @click.once ="selectItemFiles(options)" />No importa cuántas veces haga clic el usuario, la acción se producirá una sola vez
0
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; }) ....