Vue equivalente di setTimeOut?

Question

Sto creando un sistema di carrello con Laravel e Vue. Quando aggiungo un elemento al carrello, visualizzo un messaggio di conferma commutando una variabile Vue osservata da un v-se:

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

E il JS:

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

(E sì, io aggiungerà questo in un catch quindi a breve).

Questo funziona correttamente e viene visualizzato il messaggio. Tuttavia, mi piacerebbe che il messaggio scomparisse di nuovo dopo un certo tempo, diciamo alcuni secondi. Come posso farlo con Vue? Ho provato setTimeOut ma a Vue sembra non piacergli, dicendo che non è definito.

EDIT: Stavo scrivendo in modo errato setTimeout come un idiota. Tuttavia, ancora non funziona:

La mia funzione è ora:

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

Answer 1

Si può provare questo codice:

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-explain: la funzione interna chiamata da setTimeout this NON è un oggetto VueJs (è l'oggetto globale setTimeout), ma self, chiamato anche dopo 2 secondi, è ancora Oggetto VueJs.

Answer 2

È possibile utilizzare Vue.nextTick

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

Answer 3

È possibile utilizzare il timeout vue.js $ come soluzione alternativa?

https://github.com/vuejs/vue-resource/issues/27

Answer 4

dopo aver incontrato lo stesso problema, ho finito su questo thread. Per la generazione futura: l'attuale risposta più votata, tenta di legare "questo" a una variabile per evitare di cambiare il contesto quando si richiama la funzione definita nel setTimeout.

Un approccio alternativo e più consigliato (utilizzando Vue.JS 2.2 & ES6) consiste nell'utilizzare una funzione freccia per collegare il contesto al genitore (in sostanza "addToBasket" è "questo" e "setTimeout" " s "questo" sarebbe ancora si riferiscono allo stesso oggetto):

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

Answer 5

Add bind (questa) per la vostra funzione di callback setTimeout

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

Answer 6

vuejs 2

prima aggiungere questo ai metodi

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

dopo che chiamano questo metodo su montato

mounted() { 
    this.sayHi() 
}