I'm making a shopping cart system with Laravel and Vue. When I add an item to the basket, I display a confirmation message by toggling a Vue variable being watched by a v-if:
<div class="alert alert-success" v-if="basketAddSuccess" transition="expand">Added to the basket</div>
And the JS:
addToBasket: function(){
item = this.product;
this.$http.post('/api/buy/addToBasket', item);
this.basketAddSuccess = true;
}
(And yes, I will be adding this in a then-catch shortly).
This works fine and the message appears. However, I'd like the message to disappear again after a certain time, say a few seconds. How can I do this with Vue? I've tried setTimeOut
but Vue doesn't seem to like it, saying it's undefined.
EDIT: I was misspelling setTimeout
like an idiot. However, it still doesn't work:
My function is now:
addToBasket: function(){
item = this.photo;
this.$http.post('/api/buy/addToBasket', item);
this.basketAddSuccess = true;
setTimeout(function(){
this.basketAddSuccess = false;
}, 2000);
}
See Question&Answers more detail:os