[Vue warn]: Error in render: “TypeError: Cannot read property ‘label‘ of undefined“

前言

主要是自己可以百分百的确定，label 已经被定义过了，然后页面也都正常加载，但是控制台就是显示这个报错信息，强迫症很不舒服，一定要把这个报错干掉。

原因

vue的渲染问题，vue初次加载的渲染，会先渲染.前面的值，然后再渲染.后面的值

解决

在报错误的地方的标签上加上v-if 判断

举例：

原先：

<view class="v-order-item-statu" >
{{  
oItem.status < 4 ? (statusOptions[oItem.status-1].label || "") : (statusOptions[oItem.status-2].label || "")
}}
</view>

报错：

 加上 v-if 判断

哪个字段提示未定义，就是判断该字段 . 前面的值存不存在

<view class="v-order-item-statu" v-if="statusOptions[oItem.status-1]">
{{  
oItem.status < 4 ? (statusOptions[oItem.status-1].label || "") : (statusOptions[oItem.status-2].label || "")
}}
</view>

也可以判断列表的长度大不大于0

<text
 v-if="selectedPlatformCategories.length > 0">{{selectedPlatformCategories[0].label}}/{{selectedPlatformCategories[1].label}}/{{selectedPlatformCategories[2].label}}</text>
						

再复杂一点的：

<view class="v-category-content" @click="clickPlatformAttrsSelect(item,item.attrValues)">
						<text
							v-if="selectedPlatformAttrValueList.filter(item1 => item1.attrId == item.attrId).length>0 && selectedPlatformAttrValueList.filter(item1 => item1.attrId == item.attrId)[0].attrValueName">{{selectedPlatformAttrValueList.filter(item1 => item1.attrId == item.attrId)[0].attrValueName}}</text>
						<text v-else style="color: #cccfd6">请选择</text>
						<u-icon class="ic-clear" v-if="item.searchType != 1 && selectedPlatformAttrValueList.filter(item1 => item1.attrId == item.attrId).length>0 && selectedPlatformAttrValueList.filter(item1 => item1.attrId == item.attrId)[0].attrValueName" name="close-circle-fill" color="#c0c4cc" size="30"
							@click.native.stop="onClearAttr(item.attrId)">
						</u-icon>
						<u-icon class="ic-arr-down"
							:name="isPlatforationSelectShow ? 'arrow-down-fill' : 'arrow-down-fill'" size="24">
						</u-icon>
					</view>