v-for读取深层数据出错

Question

这是pug代码

ul  
        li(v-for="item in data")
            img.cover(:src="item.cover.url")
            span.title {{ item.title }}
            span.rating-value {{item.cover.url }}
            span.directors 导演：
                span(v-for="i in item.directors") {{ i }}
            span.actors 主演：
                span(v-for="i in item.actors") {{ i+' / ' }}
            span.rating-count(v-text="item.hello ") 人看过
            span.booking 购票

这是数据对象

data = [
    {
      "original_price": null,
      "rating": {
        "count": 29470,
        "max": 10,
        "value": 6.2
      },
      "actions": [
        
      ],
      "year": "2017",
      "card_subtitle": "2017 / 中国大陆 / 喜剧 爱情 / 田羽生 / 韩庚 郑恺",
      "id": "26662193",
      "title": "前任3：再见前任",
      "label": null,
      "actors": [
        "韩庚",
        "郑恺",
        "于文文"
      ],
      "type": "movie",
      "forum_info": {
        "id": "movie/26662193",
        "participant_count": 1495,
        "uri": "douban://douban.com/movie/26662193/forum_topics"
      },
      "description": "",
      "price": null,
      "date": null,
      "info": "中国大陆 / 喜剧 爱情 / 田羽生 / 韩庚 郑恺",
      "url": "https://www.douban.com/doubanapp/dispatch?uri=/movie/26662193/",
      "release_date": "12.29",
      "cover": {
        "url": "https://img1.doubanio.com/view/photo/m_ratio_poster/public/p2508926717.webp",
        "width": 1001,
        "shape": "rectangle",
        "height": 1500
      },
      "uri": "douban://douban.com/movie/26662193",
      "subtype": "",
      "directors": [
        "田羽生"
      ],
      "reviewer_name": "",
      "null_rating_reason": ""
    },
    {...},
    {...},
    {...}
]

如图，item.cover.url可以获取，但是同样的item.rating.value就报错了

Answer 1

初始化问题
因为还没有取到值
页面先渲染
对象里面的属性没有值得话会返回undefined;
你说的深层次数据化的话 就是指的undefined;
undefined的是没有属性的话会报错;
vue里面是一直监听页面；
当你取到所有数据的时候，也就会渲染页面了；
但是报错是你没有取到数据的时候显示的；

Answer 2

最后一张图弄嗝清楚的上传

Answer 3

这好像是vue的一个小bug，处理三级json的时候会出现这个问题，你可以加个v-if判断，如：

<div v-if="item.a.b">{{item.a.b.c}}</div>