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

 报错：

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

    <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>