Vue相当于setTimeout？

Question

我正在使用 Laravel 和 Vue 制作购物车系统。当我将一个项目添加到购物篮时，我通过切换一个 v-if 正在监视的 Vue 变量来显示一条确认消息：

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

原文由 flurpleplurple 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

箭头功能

解决此问题的最佳和最简单的方法是使用箭头函数 () => {} ：

     addToBasket() {
        var item = this.photo;
        this.$http.post('/api/buy/addToBasket', item);
        this.basketAddSuccess = true;
        // now 'this' is referencing the Vue object and not the 'setTimeout' scope
        setTimeout(() => this.basketAddSuccess = false, 2000);
    }

这是因为箭头函数的 this 绑定到其 封闭范围 的 this - 在 Vue 中，这是父/封闭组件。然而，在 setTimeout 调用的传统函数中， this 指的是 window 对象（这就是您尝试访问时遇到错误的原因 this.basketAddSuccess 在这种情况下）。

参数传递

另一种方法是通过 setTimeout 的原型 使用其 setTimeout(callback, delay, arg1, arg2, ...) 形式将 this 作为参数传递给您的函数：

     addToBasket() {
        item = this.photo;
        this.$http.post('/api/buy/addToBasket', item);
        this.basketAddSuccess = true;
        //Add scope argument to func, pass this after delay in setTimeout
        setTimeout(function(scope) {
             scope.basketAddSuccess = false;
        }, 2000, this);
    }

（值得注意的是，arg 传递语法与 IE 9 及更低版本不兼容。）

局部变量

另一种 可能 但不太雄辩且不太受鼓励的方法是将 --- 绑定到 this setTimeout 的 var：

     addToBasket() {
        item = this.photo;
        this.$http.post('/api/buy/addToBasket', item);
        this.basketAddSuccess = true;
        //Declare self, which is accessible inside setTimeout func
        var self = this;
        setTimeout(function() {
             self.basketAddSuccess = false;
        }, 2000);
    }

然而，使用箭头函数将完全消除对这个额外变量的需求，除非有其他东西阻止它的使用，否则真的应该使用它。

原文由 g.annunziata 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

遇到同样的问题后，我结束了这个线程。为了下一代：当前投票最多的答案，尝试将“this”绑定到一个变量，以避免在调用 setTimeout 中定义的函数时更改上下文。

另一种更推荐的方法（使用 Vue.JS 2.2 和 ES6）是使用箭头函数来将上下文绑定到父级（基本上是“addToBasket”的“this”和“setTimeout”的“this”仍然会引用同一个对象）：

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

原文由 Samuel Bergström 发布，翻译遵循 CC BY-SA 3.0 许可协议