VUE中出现 Cannot read property ‘length‘ of undefined 的错误

最新推荐文章于 2023-05-14 09:45:50 发布

O3ohn

最新推荐文章于 2023-05-14 09:45:50 发布

阅读量677

点赞数

CC 4.0 BY-SA版权

分类专栏：小问题文章标签： vue

本文链接：https://blog.youkuaiyun.com/ka_xingl/article/details/115518113

小问题专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何在 Vue.js 中避免因数据延迟导致的'Cannot read property 'length' of undefined'错误，通过添加条件判断处理undefined的附件列表。关键在于提前确保数据存在再进行渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

报错Cannot read property ‘length’ of undefined

在这里插入图片描述

<div>
   <el-row class="title2" v-if="dataList.attachmentList.length != 0">
     <span>附件列表：</span>
     <el-row v-for="item in dataList.attachmentList" :key="item.id">
       <a @click="downloadFile(item.attachName,item.attachUrl)">{{item.attachName}}</a>
     </el-row>
   </el-row>
 </div>

渲染页面调用dataList.attachmentList.length 方法时，后台数据还没有返回回来，此时attachmentList为null，所以会报错。

解决办法：在外层加if判断，这样当数据还没有返回时，页面不会渲染。

代码：

<div v-if="dataList.attachmentList">
   <el-row class="title2" v-if="dataList.attachmentList.length != 0">
     <span>附件列表：</span>
     <el-row v-for="item in dataList.attachmentList" :key="item.id">
       <a @click="downloadFile(item.attachName,item.attachUrl)">{{item.attachName}}</a>
     </el-row>
   </el-row>
 </div>