Vue—常见报错信息

vue 常见报错信息

帝博格T－bag

3187人浏览 · 2022-07-20 16:26:18

帝博格T－bag · 2022-07-20 16:26:18 发布

1、描述：无法设置未定义的属性“类型”

uncaught (in promise) typeerror: cannot set proerty 'type' of undefined
未捕获（承诺）类型错误：无法设置未定义的属性“类型”

原因：没有对接口返回值，做非空判断，导致接口还没有获取到值，就已经赋值了

this.$httpExt().post(url+'?parentId='+id, undefined, 'gateway').then(response => {
				let data =response.obj
				this.initAnalysisData(data)
            })

解决方案：对接口返回值做非空判断

let url = apiData.investigationReport.relInvestigationAnalysis;
            this.$httpExt().post(url+'?parentId='+id, undefined, 'gateway').then(response => {
				let data =response.obj
				if (data) {
					this.initAnalysisData(data)
				}
            })

2、描述：类型检查失败，预期接收的数据类型和实际传入数据类型不一致
例子1：

[Vue warn]: Invalid prop: type check failed for prop "multipleLimit". Expected Number with value 0, got String with value "0".
无效的属性：属性“multipleLimit”的类型检查失败。 预期值为 0 的数字，得到值为“0”的字符串。

原因：预期是数字类型，实际是字符串类型
解决方案：把字符串类型转换成数字类型

<el-select multiple-limit="0"></el-select>  改为
<el-select :multiple-limit="0"></el-select>

例子2：

[Vue warn]: Invalid prop: type check failed for prop "title". Expected String, got Boolean with value false.
[Vue 警告]：无效的道具：道具“title”的类型检查失败。 预期的字符串，得到值为 false 的布尔值。

原因：预期是字符串类型，实际是布尔类型
解决方案：把布尔类型转换为字符串类型

<el-popover
:title="([1,2,5].indexOf(item.simuItem.serType)>-1)&&item.simuItem.serName"
width="330">
</el-popover>
改为
<el-popover
:title="([1,2,5].indexOf(item.simuItem.serType)>-1) ? item.simuItem.serName : ''"
width="330">
</el-popover>

例子3：

[Vue warn]: Invalid prop: type check failed for prop "center". Expected Boolean, got String with value "true".
[Vue 警告]：无效的道具：道具“center”的类型检查失败。 预期的布尔值，得到值为“true”的字符串。

原因：预期是布尔类型，实际是字符串类型
解决方案：把字符串类型转换为布尔类型

<el-dialog
title="可以合并的训练需求"
:visible.sync="mergePopup"
center="true"
width="60%">
</el-dialog>
改为
<el-dialog
title="可以合并的训练需求"
:visible.sync="mergePopup"
:center="true"
width="60%">
</el-dialog>

2-1、排查思路：

根据搜索关键词快速定位问题（multipleLimit、title、center）
当前关键词为小驼峰命名，那么搜索时，再大写字母加上’-'，并把大写改成小写，例如： multiple-limit

3、无法读取未定义的属性‘长度’

Error in callback for watcher "editMultipleCourseJson.areaArr": "TypeError: Cannot read property 'length' of undefined"
[Vue 警告]：观察者“editMultipleCourseJson.areaArr”的回调错误：“TypeError：无法读取未定义的属性‘长度’”

原因：newVal 为空时（null、false、‘’、0、undefined），则无法获取属性值，所以无法读取未定义的属性的长度

解决方案：先做对象的非空判断，再做对象属性的长度判断

"editMultipleCourseJson.areaArr": {
   handler: function (newVal, oldVal) {
   		if (newVal.length > 0) {
   			
		}
	},
	deep: true
}
改为
"editMultipleCourseJson.areaArr": {
   handler: function (newVal, oldVal) {
   		if (newVal && newVal.length > 0) {
   			
		}
	},
	deep: true
}

4、 v-for 循环时，绑定key =“item”,item 是一个对象或数据

Avoid using non-primitive value as key, use string/number value instead.
避免使用对象或是数组作为key，而是使用字符串/数字值

解决方案：绑定key值，使用index绑定

v-for="item in baseObj.block" :key="item"
改为
v-for="(item,index) in baseObj.block" :key="index"

5、渲染错误

[Vue warn]: Error in render: "TypeError: Cannot read property 'simuItem' of undefined"
[Vue 警告]：渲染错误：“TypeError：无法读取未定义的属性‘simuItem’”

产生原因：对象的属性未声明，但是在页面上有实际的应用

<div style="line-height: 24px;margin-bottom: 10px;">
	<span class="group-name" >组名：{{menuObj.item.simuItem.trainName}}</span>
	<span class="training-type" >训练类型：{{menuObj.item.simuItem.tTrPlanAreaEntityVo.subjectName}}</span>
</div>
// menuObj 初始化是一个空对象

解决方案：加v-if判断，当对象属性有值时，再调用对象的属性

<div v-if="menuObj.item && menuObj.item.simuItem && menuObj.item.simuItem.trainName" style="line-height: 24px;margin-bottom: 10px;">
        <span class="group-name" >组名：{{menuObj.item.simuItem.trainName}}</span>
        <span class="training-type" v-if="menuObj.item.simuItem.tTrPlanAreaEntityVo">训练类型：{{menuObj.item.simuItem.tTrPlanAreaEntityVo.subjectName}}</span>
      </div>

6、 v-for 循环时，避免绑定非原始值的key值
报错原因

[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.
[Vue 警告]：避免使用非原始值作为键，而是使用字符串/数字值。

解决方案： :key的绑定值由非原始值变成索引值
例子1：

<div
v-for="item in baseObj.block"
:key="item"></div>
改为
<div
v-for="(item,blockIndex) in baseObj.block"
:key="blockIndex"></div>

例子2：

<span
  v-if="item.simuItem.isCustomerS == '1'">
   学员：
   <span
     v-for="customer in item.simuItem.customerList"
     :key="customer"
     v-if="customer.rankNo=='T303'||customer.rankNo=='S'">
     {{customer.cnName}}{{customer.tsFlag==='0' ? '*' : ''}},
   </span>
   <br/>
</span>
改为
<span
  v-if="item.simuItem.isCustomerS == '1'">
   学员：
   <span
     v-for="(customer, customerIndex) in item.simuItem.customerList"
     :key="customerIndex"
     v-if="customer.rankNo=='T303'||customer.rankNo=='S'">
     {{customer.cnName}}{{customer.tsFlag==='0' ? '*' : ''}},
   </span>
   <br/>
</span>

6-1. 如何快速定位问题

打开控制台，查看报错信息
翻译报错信息，并理解

[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.
[Vue 警告]：避免使用非原始值作为键，而是使用字符串/数字值。

理解：就是做v-for循环时，绑定的key 不是对象的原始值，原始值是指在data () 里面声明的值，例如：simuObj、name
没有data里面声明的，后期通过赋值的形式获取的为非原始值，例如 baseObj，baseKey

data () {
	return {
		simuObj: {} // 数据对象
		obj: [
			{
				name: '张三';
			}
		]
	}
}
mounted () {
	this.initData ();
},
method: {
	initData () {
		// 请求接口
		let data = axios...  // 接口请求后返回值
		this.simuObj = data;
	}
}

<div id="main-J_Draw"
   class="ui-draw-new ui-draw-new-special"
   :class="{'first':baseIndex==0}"
   v-for="(baseObj,baseKey,baseIndex) in simuObj"
   :key="baseObj"
>
</div>

展开错误列表，点击第一个当前页面的报错代码
光标所在的这样一行就是错误信息来源，得出可能原因是 customer.rankNo、 key: customer 两种情况
再结合第二个点错误信息，绑定的key 不是对象的原始值，那么报错的关键原因就是 key: customer
再当前页面搜索关键词 customer ，再html区域，并有v-for 循环，并有 :key = “customer”,
解决方案看例子2

7、绑定key 值，出现了重复键

 [Vue warn]: Duplicate keys detected: '5'. This may cause an update error. 
 [Vue 警告]：检测到重复键：'5'。 这可能会导致更新错误。

原因：key绑定的值，不是唯一值

解决方案： key绑定的值改为唯一值

<el-select filterable v-model="SchoolResultForm.theoryStudySchool" placeholder="请选择">
	<el-option
     v-for="item in options"
     :key="item.schoolSystem"
     :label="item.schoolName"
     :value="item.schoolName">
   	</el-option>
</el-select>
改为
<el-select filterable v-model="SchoolResultForm.theoryStudySchool" placeholder="请选择">
	<el-option
     v-for="item in options"
     :key="item.id"
     :label="item.schoolName"
     :value="item.schoolName">
   	</el-option>
</el-select>

渲染错误

 [Vue warn]: Property or method "item" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
 [Vue 警告]：属性或方法“item”未在实例上定义，但在渲染期间被引用。 通过初始化该属性，确保该属性是反应性的，无论是在数据选项中，还是对于基于类的组件。

原因：没有声明item变量，就在html页面上调用
解决方案：删除html中的调用 {{item}}, 或者在data 声明 item变量

排查思路修正：
原来思路：

根据当前url，找到路由，例如： http://localhost:8026/#/fleetPlaneIndex，当前路由为 fleetPlaneIndex
再VScode里面查找到 fleetPlaneIndex文件，结果排查了好久，发现页面对不上（花了半小时，才发现）

修正思路：

根据当前url，找到路由，例如： http://localhost:8026/#/fleetPlaneIndex，当前路由为 fleetPlaneIndex
打开路由列表，搜索fleetPlaneIndex，找到实际跳转的component

{	path: 'fleetPlaneIndex',
     component: LazyLoad('aptitprocessmanage/fleetplan/fleetplan'),
      name: "fleetplan",
      meta: { title: '标题' }
}

再通过VScode 搜索 aptitprocessmanage/fleetplan/fleetplan ，找到对应页面

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...