0
123
ViewsHow to make delay in delete request for 1 sec in Vue.js
I have products that are being taken with API calls and the user can put them into the cart. So, they can be also deleted but I want it to be removed from the front-end after 1 sec because there is an animation on the delete button. So my cart is like the one below:
So when the bin button clicked it is being deleted but immediately, I want it to be taken like 1 or 2 sec. So for this my code is like:
<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>
So I don't know even I set a timeout why it is being deleted immediately but not wait for 1 sec.
·
Santiago Trujillo
2 answers
Answer question0
Could you try delaying the actual method call
removeProductFromCart(id) {
this.loading = true;
setTimeout(() => {
cartHelper.removeFromCart(id, (response) => {
this.$store.dispatch('removeProductFromCart', {
cart: response.data,
})
this.loading = false
});
}, 1000)
·
Santiago Trujillo
Report
0
The problem here is that you are only delaying the loading flag, but not the actual action itself. Move your dispatching action inside the setTimout too.
removeProductFromCart(id) {
cartHelper.removeFromCart(id, (response) => {
this.loading = true;
setTimeout(() => {
this.$store.dispatch('removeProductFromCart', {
cart: response.data,
})
this.loading = false
}, 1000);
});
}
·
Santiago Trujillo
Report
Answer question