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＆amp; ES6）是使用箭头函数将上下文绑定到父级（基本上是“addToBasket”的“this”和“setTimeout”' s“this”仍将引用相同的对象）：

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

Answer 2

您可以尝试以下代码：

onclick={() => this.getForecast() }

迷你解释：setTimeout addToBasket: function(){ item = this.photo; this.$http.post('/api/buy/addToBasket', item); this.basketAddSuccess = true; var self = this; setTimeout(function(){ self.basketAddSuccess = false; }, 2000); }调用的内部函数不是VueJs对象（是setTimeout全局对象），但是{2}之后也调用的this仍然是VueJs对象。

编辑1：带箭头功能的示例

self

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 () {
  this.sayHi()
}

Answer 6

箭头功能

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

    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作为arg通过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及以下版本不兼容。）

Answer 7

您可以使用Vue.nextTick

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

Answer 8

如果要在函数中使用this关键字，则需要在ES6中编写te setTimeout函数。

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

Answer 9

上面的凯文·穆赫瓦特（Kevin Muchwat）给出了最佳答案，尽管只有10次投票并且没有选择答案。

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

让我解释为什么。

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

但是，Microsoft以其无穷的智慧决定Internet Explorer将永远不会支持ECMA2015！

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

执行标准功能（）{}并添加.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 10

使用this.animationStop，而不使用this.animationStop （）

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

Answer 11

使用箭头功能时无需bind(this)：

  setTimeout( ()=> {
    // some code
   }, 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：

success!
<module 'something__else' from '/tmp/solebay/My Project Name/setup.py'>

Vue相当于setTimeOut？

13 个答案:

箭头功能

参数传递