Vue entspricht setTimeOut?

Question

Ich mache ein Einkaufswagen-System mit Laravel und Vue. Wenn ich einen Artikel in den Warenkorb legen, zeige ich eine Bestätigungsmeldung durch eine Vue Variable Makeln durch ein Beobachtete v-if:

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

und die JS:

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

(Und ja, ich wird dies in einem then-catch in Kürze hinzufügen).

Dies funktioniert einwandfrei und die Nachricht erscheint. Ich möchte jedoch, dass die Nachricht nach einer bestimmten Zeit wieder verschwindet, sagen wir ein paar Sekunden. Wie kann ich das mit Vue machen? Ich habe versucht setTimeOut, aber Vue scheint es nicht zu mögen und sagt, es ist undefiniert.

EDIT: Ich war falsch geschrieben setTimeout wie ein Idiot. Allerdings funktioniert es immer noch nicht:

Meine Funktion ist jetzt:

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

Answer 1

Sie diesen Code versuchen:

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-Erklärung: Inside-Funktion von SetTimeout this aufgerufen wird nicht VueJs Objekt (ist setTimeout globales Objekt), aber self, auch nach 2 Sekunden genannt, ist immer noch VueJs Object.

Answer 2

Sie verwenden Vue.nextTick

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

Answer 3

Kann das Timeout vue.js $ als Workaround verwendet werden?

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

Answer 4

nach dem gleichen Problem zu begegnen, landete ich auf diesem Thread auf. Für die zukünftige Generation: Die aktuell höchste Antwort versucht, "this" an eine Variable zu binden, um zu vermeiden, dass der Kontext beim Aufruf der im setTimeout definierten Funktion geändert wird.

Ein alternative und mehr empfohlen Ansatz (Vue.JS 2.2 & ES6 verwendet wird) ist eine Pfeilfunktion zu verwenden, um den Kontext zu dem übergeordneten (im Wesentlichen „addToBasket“ ‚s‚this‘und der‚SetTimeout‘‘ zu binden, s "diese" noch auf das gleiche Objekt beziehen würde):

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

Answer 5

Add bind (diese), um Ihre setTimeout Callback-Funktion

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

Answer 6

vuejs 2

erste fügen diese Verfahren

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

nach diesem Aufruf dieser Methode auf

mounted() { 
    this.sayHi() 
}