VUE 中使用 setTimeout() setInterval()函数的问题

最新推荐文章于 2023-11-13 20:25:54 发布

weixin_30420305

最新推荐文章于 2023-11-13 20:25:54 发布

阅读量126

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liangjing-yy/p/9019687.html

本文探讨了在Vue中使用setTimeout函数时遇到的问题，即其内部this指向并非Vue实例，导致无法直接更新Vue实例的数据属性。通过调整引用方式解决了该问题。

在vue点击事件调用函数的过程中，想通过 setTimeout() setInterval()函数来延迟修改参数时，发现函数没有执行，控制台也没有报错，代码如下：

var vm_target = new Vue({
                el: '#vm_target',
                data: {
                    clickSubmitBtn:false
                },
                methods:{
                    myFunc:function(){
                        setTimeout(function(){
	                    this.clickSubmitBtn = true; //此处修改data中的参数时无效
                        },500);
                    }
                }
             })

之后在调试的时候，发现，setTimeout()函数中的 this 指向的并非vue对象，将this.clickSubmitBtn = true; 修改为 vm_target.clickSubmitBtn = true;之后，代码便可以正常执行。

var vm_target = new Vue({
                el: '#vm_target',
                data: {
                    clickSubmitBtn:false
                },
                methods:{
                    myFunc:function(){
                        setTimeout(function(){
	                    vm_target .clickSubmitBtn = true; //修改此处
                        },500);
                    }
                }
             })

看来之后还需要详细的去了解JS中的this，到底指向谁了，希望能帮助到其他人。

转载于:https://www.cnblogs.com/liangjing-yy/p/9019687.html