TypeError: Cannot read property ‘xxxx’ 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}}

这样就可以完美解决问题了。