Vue--修复报错 Error in render: “TypeError: Cannot read properties of null (reading ‘substring‘)“

问题

请求接口之后页面渲染完整没问题，但是控制台会出现报错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的机制是加载之后，根据条件判断是否进行显示