Vue框架的学习中,使用substring方法时提示:Uncaught TypeError: Cannot read property ‘substring‘ of undefined的解决方法
程序员文章站
2022-06-24 11:58:52
PS:刚进门的小白,可能有考虑不足或者有说错的地方,望各位大佬斧正,这边也好改正,避免入坑个人总结了出现这种问题的情况1.看下代码有没有出现硬性错误(书写错误)2.代码的作用域的问题(逻辑错误),今天要说明的主要是这个逻辑错误,写的语法没有问题,单独的应用也没问题,然后把代码块放进去定时器中报雷:Uncaught TypeError: Cannot read property ‘substring’ of undefined 换了substr这个方法也是一样的问题,最终重新整理了一下思路,终于发现了...
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方法
感觉各位的阅读,希望该贴能够帮助各位解决问题
本文地址:https://blog.csdn.net/zhuifengyx/article/details/107481920