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

Answer 1

在遇到同样的问题之后,我最终得到了这个帖子.为了下一代的缘故:当前最多的投票答案,尝试将"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 2

你可以试试这段代码:

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 3

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

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

Answer 4

ES6可以绑定“ this”

setTimeout(() => {

 },5000);

Answer 5

上面的 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))

我本想将此添加为对凯文回复的评论，但由于某些愚蠢的原因，发布回复比评论回复所需的积分更少

不要犯我犯过的同样的错误！

我在 Mac 上编写代码，并使用了 48 分赞成的评论，效果非常好！直到我接到一些关于我的脚本失败的电话，我无法弄清楚原因。我必须返回并将数十个调用从箭头语法更新为 function(){}.bind(this) 语法。

值得庆幸的是，我再次找到了这个帖子并得到了正确的答案。凯文，我永远感激不已。

根据“接受的答案”，在处理附加库时存在其他潜在问题（正确访问/更新 Vue 属性/函数存在问题）

Answer 6

Vuejs 2

首先将其添加到方法中

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

之后在mounted上调用这个方法

mounted () {
  this.sayHi()
}