vue组件中的this指向问题
【问题描述】返回顶部组件里,用到数据操作。通过方法里改动this数据,但发现直接使用失效 检查后发现this指向window,而非vue实例,所以无法操作数据。mounted() {window.onscroll=function(){if(document.documentElement.scrollTop>100) {this...
·
【问题描述】返回顶部组件里,用到数据操作。通过方法里改动this数据,但发现直接使用失效 检查后发现this指向window,而非vue实例,所以无法操作数据。
mounted() {
window.onscroll=function(){
if(document.documentElement.scrollTop>100) {
this.isActive=true;
}else{
this.isActive=false;
}
}
}
【解决方案】:因为在函数内部使用this时,this会指向window,而非vue实例。所以除了vue组件自身方法外,在别的地方调用this时,首先需要在最外部,设置一个变量,将其绑定上vue实例。
mounted() {
/* 问题:在内部直接操作this失效? */
/* 解析:因为在函数内部使用this时,this会指向window,而非vue实例。所以除了vue组件自身方法外,在别的地方调用this时,
首先需要在最外部,设置一个变量,将其绑定上vue实例。*/
var vm=this;
window.onscroll=function(){
if(document.documentElement.scrollTop>100) {
vm.isActive=true;
}else{
vm.isActive=false;
}
}
}
更多推荐
已为社区贡献27条内容
所有评论(0)