0
115
VistasCómo retrasar la solicitud de eliminación durante 1 segundo en Vue.js
Tengo productos que se están tomando con llamadas a la API y el usuario los puede poner en el carrito. Por lo tanto, también se pueden eliminar, pero quiero que se elimine del front-end después de 1 segundo porque hay una animación en el botón Eliminar. Así que mi carrito es como el siguiente:
Entonces, cuando se hace clic en el botón de la papelera, se elimina, pero de inmediato, quiero que se tome como 1 o 2 segundos. Así que para esto mi código es como:
<template> <div id="delete-button" @click.prevent="removeProductFromCart(item.id)"> <input type="checkbox" id="checkbox"> <div id="bin-icon"> <div id="lid"></div> <div id="box"> <div id="box-inner"> <div id="bin-lines"></div> </div> </div> </div> </div> </template> <script> import cartHelper from "../helpers/cartHelper"; export default { props: { item: Object, }, data() { return { loading: false, }; }, methods: { removeProductFromCart(id) { cartHelper.removeFromCart(id, (response) => { this.loading = true; this.$store.dispatch('removeProductFromCart', { cart: response.data, }) setTimeout(() => this.loading = false, 1000); }); }, } }; </script>Entonces, ni siquiera sé si configuré un tiempo de espera por qué se elimina de inmediato, pero no espere 1 segundo.
2 Respuestas
Responde la pregunta0
¿Podría intentar retrasar la llamada al método real?
removeProductFromCart(id) { this.loading = true; setTimeout(() => { cartHelper.removeFromCart(id, (response) => { this.$store.dispatch('removeProductFromCart', { cart: response.data, }) this.loading = false }); }, 1000)0
El problema aquí es que solo está retrasando la bandera de carga, pero no la acción en sí. Mueva su acción de despacho dentro de setTimout también.
removeProductFromCart(id) { cartHelper.removeFromCart(id, (response) => { this.loading = true; setTimeout(() => { this.$store.dispatch('removeProductFromCart', { cart: response.data, }) this.loading = false }, 1000); }); }