Vue 相当于 setTimeout? [英] Vue equivalent of setTimeout?

问题描述

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

I'm making a shopping cart system with Laravel and Vue. When I add an item to the basket, I display a confirmation message by toggling a Vue variable being watched by a v-if:

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

(是的，我很快就会在 then-catch 中添加这个).

(And yes, I will be adding this in a then-catch shortly).

这工作正常，并显示消息.但是，我希望消息在一段时间后再次消失，比如几秒钟.我怎样才能用 Vue 做到这一点?我试过 setTimeOut 但 Vue 似乎不喜欢它，说它未定义.

This works fine and the message appears. However, I'd like the message to disappear again after a certain time, say a few seconds. How can I do this with Vue? I've tried setTimeOut but Vue doesn't seem to like it, saying it's undefined.

我像个白痴一样拼错了 setTimeout.但是，它仍然不起作用:

I was misspelling setTimeout like an idiot. However, it still doesn't work:

我现在的功能是:

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

推荐答案

箭头函数

解决这个问题最好和最简单的方法是使用箭头函数() =>{}:

    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 在那种情况下).

This works because the this of arrow functions is bound to the this of its enclosing scope- in Vue, that's the parent/ enclosing component. Inside a traditional function called by setTimeout, however, this refers to the window object (which is why you ran into errors when you tried to access this.basketAddSuccess in that context).

另一种方法是通过 setTimeout 的原型 使用它的 setTimeout(callback, delay, arg1, arg2, ...) 形式:

Another way of doing this would be passing this as an arg to your function through setTimeout's prototype using its setTimeout(callback, delay, arg1, arg2, ...) form:

    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 及以下版本不兼容.)

(It's worth noting that the arg passing syntax is incompatible with IE 9 and below, however.)

另一种可能，但不那么雄辩和不鼓励，方法是将 this 绑定到 setTimeout 之外的 var :

Another possible, but less eloquent and less encouraged, way is to bind this to a var outside of setTimeout:

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

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

Using an arrow function would eliminate the need for this extra variable entirely however, and really should be used unless something else is preventing its use.

这篇关于Vue 相当于 setTimeout?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！