等價於setTimeOut的Vue？

Question

我正在用Laravel和Vue製作購物車系統。當我將項目添加到購物籃，我顯示通過切換一個Vue的變量的確認消息通過正在觀看的V-如果：

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

而JS：

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

（是的，我稍後將會加入這個）。

這工作正常，消息出現。但是，我希望消息在一段時間後再次消失，比如幾秒鐘。我如何用Vue做到這一點？我試過setTimeOut，但Vue似乎不喜歡它，說它是未定義的。

編輯：我拼寫錯誤setTimeout像個白癡。但是，它仍然不能正常工作：現在

我的功能是：

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

Answer 1

你可以試試這個代碼：

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

迷你解釋：由setTimeout this調用的內部函數不是VueJs對象（是setTimeout全局對象），但self，也叫2秒後，仍然是VueJs對象。

Answer 2

您可以使用Vue.nextTick

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

Answer 3

可以將vue.js $ timeout用作解決方法嗎？

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

Answer 4

遇到了同樣的問題後，我結束了在此線程。爲了未來世代的緣故：當前最多投票答案，試圖將「this」綁定到變量，以避免在調用setTimeout中定義的函數時更改上下文。

另一種更推薦的方法（使用Vue.JS 2.2 & ES6）是使用箭頭函數來將上下文綁定到父項（基本上「addToBasket」的「this」和「setTimeout」'的 「這」 仍然指向同一個對象）：

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

Answer 5

添加綁定（這個）你的setTimeout回調函數

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

Answer 6

vuejs 2

首先該呼叫後添加此的方法

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

此方法上安裝

mounted() { 
    this.sayHi() 
}