vuejs+Echarts页面空白问题

1.页面加载失败,整个页面是空白的,打开f12调试,报错信息为:

Error: Initialize failed: invalid dom.

检查html页面发现问题:

<div class="ms3_business_hall">
        <span class="ms3_name">{{monitorBusinessHall.statsName}}</span>
</div>

问题出现在这里-->

{{monitorBusinessHall[0].subItemList[0].statsName}}

页面上直接使用数据绑定{{object.xxx}},但没有判断这个对象是否为null.

解决方法:

<div class="ms3_business_hall">
        <span class="ms3_name" v-if="monitorBusinessHall != null">
            {{monitorBusinessHall.statsName}}
        </span>
</div>

使用v-if控制是否渲染这个dom对象,如果为true,Echarts就获取不到这个dom对象,就避免了出现invalid dom这个报错了.