问题

请求接口之后页面渲染完整没问题,但是控制台会出现报错Error in render: “TypeError: Cannot read properties of null (reading ‘substring‘)“
如图所示:
在这里插入图片描述

分析

报错部分代码如下:

<div class="content">
	<p class="title fs-30">{{item.title}}</p>
    <p class="time fs-18">{{item.createTime.substring(0,10)}}</p>
</div>

这里使用到substring的时候是在读取对象中的createTime属性。
根据上面的报错提示,大概意思就是模板在渲染读取某个对象的属性值的时候,这个对象不存在,也就是说我在使用substring的时候还没有拿到值。

解决

<div class="content">
	<p class="title fs-30">{{item.title}}</p>
    <p class="time fs-18" v-if="item.sreateTime">{{item.createTime.substring(0,10)}}</p>
</div>

在使用substring之前先进行一个if判断,能取到值就截取,没有取到值就不加载。
注:这里不能使用v-show,v-show的机制是加载之后,根据条件判断是否进行显示

Logo

前往低代码交流专区

更多推荐