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

在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,到底指向谁了,希望能帮助到其他人。

posted @ 2018-05-10 15:00  咩咩阳  阅读(17149)  评论(1编辑  收藏  举报