如下一段代码，其中的color字段渲染成功，但是页面一直报错undefind：
[Vue warn]: Error in render: "TypeError: Cannot read property 'color' of undefined"
经过查资料发现原因是因为progressOrderList是在mounted后获取到的数据，因为异步调取接口获取数据和vue的生命周期mounted异步进行，在mounted已经走完，页面DOM节点已经挂载完成时，接口数据却没有第一时间一起返回并渲染。
<div class="label" :style="{background:progressOrderList[0].color,left:progressOrderList[0].width-0.4+'rem'}">
<span>增长{{progress.growthRate}}%</span>
<div class='triangle' :style="{borderTopColor:progressOrderList[0].color}"></div>
</div>
data(){
return {
progressOrderList:[],
progressOrderReverseList:[]
}
},
解决方法：需要在DOM节点挂载完成时判断初始化的数据是否存在（初始化的数据我们一般会设置为空的字符串或空的对象）。由于初始化时我给数据设置的是空的对象，但却没有判断这个对象是否为空，所以就导致了以上属性未定义的警告出现。这里还有一个小问题，如果给初始化的数据设置为空的对象，那么在页面中需要判断该数据是否为空对象或者空数组就不太好判断了（为true），所以初始值设置为空字符串
<div class="label" v-if="progressOrderList" :style="{background:progressOrderList[0].color,left:progressOrderList[0].width-0.4+'rem'}">
//渲染之前，用v-if进行判断
<span>增长{{progress.growthRate}}%</span>
<div class='triangle' :style="{borderTopColor:progressOrderList[0].color}"></div>
</div>
data(){
return {
progressOrderList:'',
progressOrderReverseList:''
//初始值应为空数组，但是不好判断是否已经取到数据，设为空数组会导致字段渲染成功，但是报undefind
}
},
