Vue équivalente à setTimeOut?

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é 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);
            }

source d'informationauteur flurpleplurple | 2016-07-15

javascript vue.js

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-expliquer: à l'intérieur de la fonction appelée par setTimeout this n'est PAS VueJs objet (est setTimeout global de l'objet), mais selfégalement appelé au bout de 2 secondes, est encore VueJs Objet.

24

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.

Un autre 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", "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);
    }
```

Ajouter bind () de votre setTimeout fonction de rappel

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

Vous pouvez utiliser la Vue.nextTick

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

vuejs 2

d'abord l'ajouter à des méthodes

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

après l'appel de cette méthode sur la montée

mounted () {
  this.sayHi()
}

utilisation this.animationStopde ne pas utiliser ce.animationStop ~~( )~~

animationRun(){
    this.sliderClass.anim = true;
    setTimeout(this.animationStop, 500);
},

Vous devez vous connecter pour publier un commentaire.