今天在vue开发的过程中,父组件向子组件传递一个数组列表循环的过程中,数据显示出来了,但是浏览器console总是报这个warning
vue报错Error in render: "TypeError: Cannot read property 'length' of undefined"
一级数组的时候直接渲染没有问题,但是一级包含对象又包含数组的时候,就会出现这个warning提示
返回数据的结构如下:
list:[
{
pic_list:['1111.jpg','222.jpg'],
info:{id:1,name:'name'},
child_list:[
{item_id:1,type:2},
{item_id:2,type:2},
]
},
{
pic_list:['1111.jpg','222.jpg'],
info:{id:1,name:'name'},
child_list:[
{item_id:1,type:2},
{item_id:2,type:2},
]
}
]
最初的渲染是这样的
<div v-for="(item,index) in list" :key="index">
<detailListBlock :data="item && item.new_list"></detailListBlock>
</div>
解决方法:
<div v-for="(item,index) in list" :key="index">
<detailListBlock :data="item && item.new_list" v-if="item.child_list !== undefined && item.child_list.length>0"></detailListBlock>
</div>