报错：
vue2在自定义组件里使用list.data[0]多级数据加上索引时报销TypeError: Cannot read properties of undefined (reading ‘0’)
![vue2在自定义组件里使用list.data[0]绑定数据加上索引时报错：TypeError: Cannot read properties of undefined (reading ‘0‘)](https://img-blog.csdnimg.cn/e3a20e3e2a5746328e75e941b77177ca.png)
[Vue warn]: Error in render: “TypeError: Cannot read properties of undefined (reading ‘1’)”
found in
—> <Home> at src/pages/Home/index.vue
<App> at src/App.vue
<Roo
<template>
<div>
<TypeNav></TypeNav>
<ListContainer></ListContainer>
<!-- 今日推荐-->
<Recommended></Recommended>
<Rank></Rank>
<!-- 猜你喜欢-->
<Like></Like>
<Floor :imageList="floorList.data[1]" key="01" />
<Floor :imageList="floorList.data[1]" key="02" />
<Brand></Brand>
</div>
</template>发现是：输出台在Floor组件props传递这个参数报错，但是在页面上显示正常,
<template>
<div>
<TypeNav></TypeNav>
<ListContainer></ListContainer>
<!-- 今日推荐-->
<Recommended></Recommended>
<Rank></Rank>
<!-- 猜你喜欢-->
<Like></Like>
<Floor :imageList='item' v-for="(item,index) in floorList.data" :key="index"></Floor>
<!-- <Floor :imageList="floorList.data[1]" key="01"></Floor>-->
<!-- <Floor :imageList="floorList.data[1]" key="02"></Floor>-->
</div>
</template>解决方法一：
将其他2个引用改成用v-for遍历就没有报错：
<Floor :imageList=’item’ v-for=”(item,index) in floorList.data” :key=”index”></Floor>
参考以下链接说法：
vue报错： “TypeError: Cannot read properties of undefined (reading ‘0‘)“_呆子小木心的博客-CSDN博客
原因是：
**需要显示的数据是通过异步方法拿到的，一开始在初始数据为空，报错是因为在显示初始数据的时候报错**
解决方法二：
所以也可以用v-if控制解析DOM:
<Floor v-if='floorList.data' :imageList="floorList.data[0]" key="01"></Floor>
<Floor v-if='floorList.data' :imageList="floorList.data[1]" key="02"></Floor>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/101537.html
