Cannot read property ‘length‘ of undefined

报错 Cannot read property ‘length’ of undefined 时解决方案

在做项目是遇到了length的报错

在做项目时遇到了length的报错。但是不影响其他东西，只是看着飘一片红感觉很难受。

查找了一下发现出现的原因
其实是因为，后台在返回数据时是需要时间的 不管多快 都是需要时间的 但是在初始化时，并没有给一个空的数组 注意 是数组形式 所以当调用 .length 方法时 这时后台数据还没有返回回来 此时它不是数组 就会报错。

解决方案

可以在整体加一个 v-if
这样当数据还没有返回时 就不会渲染 只有数据返回回来时 才会进行渲染
这样就会解决报错的问题

代码如下 代码片.

<div class="main" v-if="book.items">
 <div class="img-list" 
   v-for="list in book.items.length > 5? book.items.slice(1, 4): book.items "
   v-bind:key="list.id">
   <div class="new-img">
     <img :src="imageUrl(list)" alt="">
     <h1 class="title">{{list.title}}</h1>
   </div>
 </div>