zoukankan      html  css  js  c++  java
  • vue组件之this指向问题

    【问题描述】

    返回顶部组件里,用到数据操作。通过方法里改动this数据,但发现直接使用失效

            mounted() {
                window.onscroll=function(){
                    if(document.documentElement.scrollTop>100) {
                        this.isActive=true;
                    }else{
                        this.isActive=false;
                    }
                }
            }

        此时发现无效???

        检查后发现this指向window,而非vue实例,所以无法操作数据。

    【解决方案】

    /*  问题:在内部直接操作this失效? */
    /* 解析:因为在函数内部使用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;
                    }
                }
            }

    .

  • 相关阅读:
    持续集成概念
    性能测试,负载测试,压力测试有什么区别
    安全测试
    接口测试及常用接口测试工具
    python-Csv 实战
    Python3 + Appium学习链接
    python-Txt实践
    python-ddt实践
    保险--总结
    selenium与页面的交互
  • 原文地址:https://www.cnblogs.com/fightjianxian/p/10697056.html
Copyright © 2011-2022 走看看