Vue框架的学习中,使用substring方法时提示:Uncaught TypeError: Cannot read property ‘substring‘ of undefined的解决方法

PS:刚进门的小白,可能有考虑不足或者有说错的地方,望各位大佬斧正,这边也好改正,避免入坑
个人总结了出现这种问题的情况
1.看下代码有没有出现硬性错误(书写错误)
2.代码的作用域的问题(逻辑错误),今天要说明的主要是这个逻辑错误,写的语法没有问题,单独的应用也没问题,然后把代码块放进去定时器中报雷:Uncaught TypeError: Cannot read property ‘substring’ of undefined 换了substr这个方法也是一样的问题,最终重新整理了一下思路,终于发现了问题所在,下面附上有问题的代码

<script>
        var vm = new Vue({
            el: '#app',      //填充的范围
            //填充的数据
            data:{
                start:'开始',
                stop: '停止',
                msg: '欢迎各位领导莅临检查',
                intervalID:null     //作为定时器变量
            },
            //填充的事件
            methods: {
                //开始按钮的触发事件
                startRoll: function () {
                    if (this.intervalID != null) return;    //判断此时是否开启了定时器,若开,则无需再次去执行定时器
                    this.intervalID = **setInterval(function () *{
                        var str = this.msg;
                        var first = str.substring(0, 1);
                        var end = str.substring(1);
                        vm.msg = end + first;
                        console.log(vm.msg);**
                    }, 500)*                 
                },
                //停止按钮的触发事件
                stopRoll: function () {
                    clearInterval(this.intervalID); //清除定时器
                    vm.intervalID = null;   //将当前的定时器标记为null, 下次才能开启定时器,不清空的话在开启定时器的时候,会被判定为当前是有定时器在执行
                }
            }
        });
    </script>

报错信息
错误说明:在定时器内写的一句代码是有作用域问题的,这个比较难发现 var str = this.msg; 此时的this指向的是windows对象,没办法去获取到vue当中的msg属性,则此时的str是undefined类型,故str.substring会出现说substring没有定义的情况。

问题的解决方式: var str = vm.msg //(vm)是vue对象,msg是vue的属性。 这样才能去获取到msg里面的文本信息,进而去使用substring方法

感觉各位的阅读,希望该贴能够帮助各位解决问题
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值