等价于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() 
}