Vue équivalente à setTimeOut?

Question

Je suis en train de faire un système de panier d'achat avec Laravel et de la Vue. Lorsque j'ajoute un article au panier, j'affiche un message de confirmation par le basculement d'une Vue variable surveillée par un v-si:

<div class="alert alert-success" v-if="basketAddSuccess" transition="expand">Added to the basket</div>

Et le JS:

addToBasket: function(){
                item = this.product;
                this.$http.post('/api/buy/addToBasket', item);
                this.basketAddSuccess = true;
            }

(Et oui, je vais être en ajoutant ceci dans un puis-catch peu de temps).

Cela fonctionne bien et le message s'affiche. Cependant, j'aimerais que le message disparaisse à nouveau après un certain temps, disons quelques secondes. Comment puis-je le faire avec Vue? J'ai essayé d' setTimeOut mais Vue ne semble pas comme elle, disant qu'il n'est pas défini.

EDIT: j'ai été faute d'orthographe setTimeout comme un idiot. Toutefois, cela ne fonctionne toujours pas:

Ma fonction est maintenant:

addToBasket: function(){
                item = this.photo;
                this.$http.post('/api/buy/addToBasket', item);
                this.basketAddSuccess = true;
                setTimeout(function(){
                    this.basketAddSuccess = false;
                }, 2000);
            }

Answer 1

Vous pouvez essayer ce code:

 addToBasket: function(){
            item = this.photo;
            this.$http.post('/api/buy/addToBasket', item);
            this.basketAddSuccess = true;
            var self = this;
            setTimeout(function(){
                self.basketAddSuccess = false;
            }, 2000);
        }
 

Mini-explication: la fonction interne appelée par setTimeout this n'est PAS un objet VueJs (est un objet global setTimeout), mais self , également appelé après 2 secondes, est toujours un objet VueJs.

Answer 2

après avoir rencontré le même problème, je suis tombé sur ce thread. Pour la future génération souci: Le courant jusqu'-plus de vote réponse, tente de lier "ce" à une variable pour éviter de changer le contexte lors de l'appel de la fonction qui est définie dans le setTimeout.

Une alternative et plus approche recommandée(à l'aide de Vue.JS 2.2 & ES6) est d'utiliser une flèche de la fonction, afin de lier le contexte de la société mère (en gros "addToBasket"de "ce" et le "setTimeout"'s ", cela" se réfèrent toujours à un même objet):

addToBasket: function(){
        item = this.photo;
        this.$http.post('/api/buy/addToBasket', item);
        this.basketAddSuccess = true;
        setTimeout(() => {
            this.basketAddSuccess = false;
        }, 2000);
    }

Answer 3

Ajoutez bind (this) à votre fonction de rappel setTimeout

 setTimeout(function () {
    this.basketAddSuccess = false
}.bind(this), 2000)
 

Answer 4

vuejs 2

ajoutez d'abord ceci aux méthodes

 methods:{
    sayHi: function () {
      var v = this;
      setTimeout(function () {
        v.message = "Hi Vue!";
    }, 3000);
   }
 

après cela, appelez cette méthode sur monté

 mounted () {
  this.sayHi()
}
 

Answer 5

Vous pouvez utiliser Vue.nextTick

 addToBasket: function(){
                item = this.photo;
                this.$http.post('/api/buy/addToBasket', item);
                this.basketAddSuccess = true;
                Vue.nextTick(() =>{
                    this.basketAddSuccess = false;
                });
            }