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

（是的，我很快会在 then-catch 中添加这个）。

这工作正常并出现消息。但是，我希望消息在一段时间后再次消失，比如几秒钟。我怎样才能用 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() {
        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 在Vue 中是bound to the this of its enclosing scope-，它是父/封闭组件。但是，在 setTimeout 调用的传统函数中，this refers to the window object （这就是为什么您在该上下文中尝试访问 this.basketAddSuccess 时遇到错误的原因）。

参数传递

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

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

使用箭头函数将完全消除对这个额外变量的需求，并且确实应该使用，除非有其他东西阻止它的使用。

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

Answer 3

将 bind(this) 添加到您的 setTimeout 回调函数

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

Answer 4

ES6 可以绑定 'this'

setTimeout(() => {

 },5000);

Answer 5

vuejs 2

首先将其添加到方法中

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

之后在mounted上调用这个方法

mounted () {
  this.sayHi()
}

Answer 6

你可以使用 Vue.nextTick

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

Answer 7

上面的 Kevin Muchwat 给出了最好的答案，尽管只有 10 个赞成票并且没有选择答案。

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

让我解释一下为什么。

“箭头函数”是ECMA6/ECMA2015。它在编译代码或受控客户端情况（cordova 电话应用程序、Node.js）中完全有效，而且简洁明了。它甚至可能通过你的测试！

然而，微软以其无限的智慧决定 Internet Explorer 永远不会支持 ECMA2015！

他们的新 Edge 浏览器可以，但这对于面向公众的网站来说还不够好。

执行标准 function(){} 并添加 .bind(this) 是 ECMA5.1（完全支持）语法，用于完全相同的功能。

这在 ajax/post .then/else 调用中也很重要。在 .then(function){}) 的末尾，您还需要在此处绑定（this）： .then(function(){this.flag = true}.bind(this))

我会将此作为评论添加到 Kevin 的回复中，但出于某种愚蠢的原因，发布回复所需的积分比评论回复要少

不要重蹈我的覆辙！

我在 Mac 上编写代码，并使用了 48 分好评的评论，效果很好！直到我接到一些关于我的脚本失败的电话，我不知道为什么。我不得不返回并将数十个调用从箭头语法更新为 function(){}.bind(this) 语法。

谢天谢地，我再次找到了这个帖子并得到了正确的答案。凯文，我永远感激不尽。

根据“已接受的答案”，这还有其他潜在问题处理其他库（在正确访问/更新 Vue 属性/函数时出现问题）

Answer 8

箭头函数

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

    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 在Vue 中是bound to the this of its enclosing scope-，它是父/封闭组件。然而，在 setTimeout 调用的传统函数中，this refers to the window object （这就是为什么您在该上下文中尝试访问 this.basketAddSuccess 时遇到错误的原因）。

参数传递

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

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

Answer 9

使用箭头函数时不需要bind(this)：

  setTimeout( ()=> {
    // some code
   }, 500)

Answer 10

如果你想在你的函数中使用 this 关键字，你需要在 ES6 中编写 setTimeout 函数

setTimeout(() => {
   this.filters.max_budget_gt_eq = this.budgetHigherValue;
}, 1000);

Answer 11

使用this.animationStop，不使用this.animationStop ( )

animationRun(){
    this.sliderClass.anim = true;
    setTimeout(this.animationStop, 500);
},

Answer 12

这可能是范围问题。请尝试以下方法：

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

Answer 13

请像下面这样使用 setInterval：

    setInterval(()=>{this.checkOrder()},2000);