TypeError: Cannot read property 'xxxx' of undefined的解决方法
TypeError: Cannot read property ‘length’ of undefined
·
在vue或者js中,使用.length的时候在浏览器的控制台中经常会报TypeError: Cannot read property 'length' of undefined
的错误,类似的错误还有很多,大多都是TypeError: Cannot read property 'xxx' of undefined
,出现这种错误的原因很简单,就是你调用该方法或函数的字符串或数组、对象等等出现了为空的情况,加一个判断就好了。
例子:
下面的代码会报TypeError: Cannot read property 'length' of undefined
的错误
let txtDom = this.$refs.textContainer;
for (let i = 0; i < txtDom.length; i++) {
let curHeight = txtDom[i].offsetHeight;
if (curHeight > twoHeight) {
this.$set(this.als, i, Object.assign({}, this.als[i], { status: true }))
} else {
this.$set(this.als, i, Object.assign({}, this.als[i], { status: true }))
}
}
原因就是txtDom出现了为空的情况,所以就没有length的属性了。解决方法就是判断txtDom是否为空,如下:
let txtDom = this.$refs.textContainer;
if(txtDom){
for (let i = 0; i < txtDom.length; i++) {
let curHeight = txtDom[i].offsetHeight;
if (curHeight > twoHeight) {
this.$set(this.als, i, Object.assign({}, this.als[i], { status: true }))
} else {
this.$set(this.als, i, Object.assign({}, this.als[i], { status: true }))
}
}
}
上面是在js中的代码报错,有时候我们在html中也会使用一些函数或方法,也要做判断,如下al.time是从后端读取的数据,可能会为空,会报TypeError: Cannot read property 'substring()' of undefined
的错误:
<el-tag size="mini" v-if="al.time">发布时间</el-tag>{{ al.time.substring(0,10)}}
解决方法是使用三元运算符做判断:
<el-tag size="mini" v-if="al.time">发布时间</el-tag>{{ al.time ? al.time.substring(0,10):al.time}}
这样就可以完美解决问题了。
更多推荐
已为社区贡献3条内容
所有评论(0)