vue2在自定义组件里使用list.data[0]绑定数据加上索引时报错：TypeError: Cannot read properties of undefined (reading ‘0‘)

最新推荐文章于 2026-06-22 13:22:52 发布

原创最新推荐文章于 2026-06-22 13:22:52 发布 · 1.7k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

vue2 专栏收录该内容

21 篇文章

订阅专栏

本文档介绍了在Vue2中遇到的错误：TypeError: Cannot read properties of undefined (reading '0')。错误源于尝试访问未初始化的异步数据。解决方法包括使用v-for遍历数据避免直接引用索引，以及结合v-if确保数据存在时才渲染组件。通过这两种方式，可以避免在数据加载完成前尝试访问不存在的数据导致的报错。

报错：

vue2在自定义组件里使用list.data[0]多级数据加上索引时报销TypeError: Cannot read properties of undefined (reading '0')

[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遍历就没有报错：

参考以下链接说法：

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>