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

news/2024/7/10 3:02:14 标签: vue, 前端

前言

主要是自己可以百分百的确定,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>


http://www.niftyadmin.cn/n/1365277.html

相关文章

[Buzz Today]2012.05.21

>> Audi Bike 奥迪概念自行车也身轻如燕&#xff0c;重量只有24磅&#xff0c;而且采用了增强型碳纤维复合物料制造车架&#xff0c;加上较低的重心设计&#xff0c;令自行车既坚固又敏捷。 奥迪概念自行车的两个车轮方面尺寸均为26寸&#xff0c;物料也与车架相同&#…

JS 获取筛选过的list item的某些属性

前言 接口是一次性返回所有的分类的&#xff0c;所以得要前端这边自己处理数据 最终效果 3列联动选择 uniapp 的select 选择器&#xff0c;固定死字段名了&#xff0c;所以我们 还需要给接口返回的字段重新命名 实现 活用list 的map(),filter(),方法 <u-select v-model…

zz Closed-form solution 闭合解

http://blog.sina.com.cn/s/blog_56c321170100f5nd.html 什么是Closed-form solution&#xff1f;闭合解 最近看论文&#xff0c;讨论微分方程解时遇到closed-form solution概念&#xff0c;上网检索&#xff0c;找到一个较浅显易懂的解释如下。 与工学院所学的微分方程不同的是…

uniapp 运行到内置浏览器,怎么打开开发者工具

首先 运行到内置浏览器是这样的&#xff1a; 然后

SQL Server编程系列(2):SMO常用对象的有关操作

在上一篇周公简单讲述了SMO的一些基本概念&#xff0c;实际上SMO体系结构远不止周公在上一篇中讲述的那么简单&#xff0c;下图是MSDN上给出的一个完整的结构图&#xff1a;上图是一个完整的涉及到各种关系的结构图。不过它们之间的层次结构关系周公已经在上一篇做了简单概述。…

小程序、网页 设置了全屏背景色,往下滑背景色就没了,变成白色

有高度百分百还不够&#xff0c;还要有overflow: scroll;这样往下滚&#xff0c;背景色就还在&#xff0c;不会变白了 .v-order-detail {height: 100%;background: #F4F4F4;overflow: scroll;padding-bottom: 10rpx; }效果对比 之前&#xff1a; 之后

华为手机微信小程序上传不了照片

前言 也是一个很突然的情况&#xff0c;微信小程序选择图片uni.chooseImage&#xff0c;上传图片uni.uploadFile&#xff0c;其他手机&#xff08;除了我测试同事的华为mate40&#xff0c;微信开发者工具的模拟器、Hbuilder的内置浏览器、然后我自己的手机&#xff08;红米not…

[转载]FTP协议详解

FTP 是File Transfer Protocol&#xff08;文件传输协议&#xff09;的英文简称&#xff0c;而中文简称为“文传协议”。用于Internet上的控制文件的双向传输。同时&#xff0c;它也是一个应用程序&#xff08;Application&#xff09;。用户可以通过它把自己的PC机与世界各地所…