VUE报错：TypeError: Cannot read property 'thumbnail' of undefined

Question

问题描述

报错如下

相关代码

<div class="newsitem" v-for="item in newsItems">
                    <router-link :to="{path: '/newsDetail',query:{ id : item.id }}">
                        <div class="m0"><img :src="item.more.thumbnail">
                            <div class="title">{{item.post_title}}</div>
                            <div class="pubtime"><span>{{item.categories[0].name}} {{item.published_time}}</span></div>
                        </div>
                    </router-link>
                </div>

在网上搜了很多，试了很多办法没有解决，大体意思是调用层级item.more.thumbnail多，报错，页面也能正常调出数据，就是报错！

想问一下该怎么解决？

Answer 1

初步判断是由于vue找不到thumbnail这个变量。更准确的说，应该是newsItems下的more没有定义或者某个item下的more没有定义，你在控制台循环打印出newsItems，你看看是不是这个问题

Answer 2

对于不确定属性的对象，不建议使用点语法，建议使用下标语法，另外，你应该充分考虑属性不存在的情况，如：<img :src="item['more'] ? item['more']['thumbnail'] : '默认值'" alt="" />;

Answer 3

这个就是没有取到值，至少有两个字段层级错误。
楼主好好检查下自己的字段数据结构。

补充2018-12-06：
在使用的字段前面加上if判断。估计是Vue为了代码健壮性加上的代码检测。
示例如下

<add-person
    v-if="travellerTemplateRule.after && travellerTemplateRule.after.template_people"
    :isShow="isOpenAddNewMask"
    :data="travellerTemplateRule.after.template_people">
</add-person>