Vue等价于setTimeout吗？

伽罗西门小胖2020-03-11

我正在使用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);
            }

泡芙小宇宙十三2020/03/11 10:24:42

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

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

阿飞Harry小胖2020/03/11 10:24:42

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

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

神乐小宇宙Gil2020/03/11 10:24:42

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

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

猪猪小卤蛋2020/03/11 10:24:42

vuejs 2

首先将此添加到方法

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

之后，在挂载上调用此方法

mounted () {
  this.sayHi()
}

猿老丝2020/03/11 10:24:42

ES6可以绑定“ this”

setTimeout(() => {

 },5000);

神无LEYTony2020/03/11 10:24:42

将bind（this）添加到您的setTimeout回调函数中

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

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer