Vue等价于setTimeout吗？

JavaScript

伽罗西门小胖

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

第534篇《Vue等价于setTimeout吗？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共6个回答
泡芙小宇宙十三 2020.03.11

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

animationRun(){
    this.sliderClass.anim = true;
    setTimeout(this.animationStop, 500);
},
阿飞Harry小胖 2020.03.11

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

setTimeout(() => {
   this.filters.max_budget_gt_eq = this.budgetHigherValue;
}, 1000);
神乐小宇宙Gil 2020.03.11

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

  setTimeout( ()=> {
    // some code
   }, 500)
猪猪小卤蛋 2020.03.11

vuejs 2

首先将此添加到方法

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

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

mounted () {
  this.sayHi()
}
猿老丝 2020.03.11

ES6可以绑定“ this”

setTimeout(() => {

 },5000);
神无LEYTony 2020.03.11

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android