Unhandled error during execution of native event handler ；Cannot read property ‘children of undefine

最新推荐文章于 2025-02-06 21:55:08 发布

Jyann~

最新推荐文章于 2025-02-06 21:55:08 发布

阅读量1.4w

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_34569497/article/details/130984828

版权

前端专栏收录该内容

173 篇文章

订阅专栏

文章讲述了在Vue应用中遇到的两种错误：执行本机事件处理程序时的未处理错误和尝试访问未定义的children属性。通过在代码中添加更严谨的条件判断来避免直接访问可能不存在的属性，从而解决了问题。原始的错误处理方法try-catch只能捕获错误，但并未解决问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：问题分析

数据能出来，页面正常显示，但是有报错。

[Vue warn]: Unhandled error during execution of native event handler ；意思是执行本机事件处理程序期间出现未处理的错误

TypeError: Cannot read property 'children' of undefined 意思是属性 children未定义

报错处代码：而且点击错误直接定位到了this.categoryList[index]这里得index后面，由此可知是这里有问题

clickFirstCategory(index) {
	this.isActive = index;
				// 点击过快时，商品展示报错（找不到children）
	this.secondCateList = this.categoryList.length > 0 && this.categoryList[index].children;
	this.thirdCateList = this.secondCateList.length > 0 && this.secondCateList[index].children;
}

2.解决

既然是执行本机事件处理程序期间出现未处理的错误，那么只要处理了这个错误就行。

首先想到得就是try catch，但是虽然错误捕捉到了，但是如果打印catch里的错误日志，还是存在，所以其实只是捕捉了错误，并没有解决

解决办法：改写此处判断条件，问题解决

if (this.categoryList.length > 0 && this.categoryList[index])
	this.secondCateList = this.categoryList[index].children;
if (this.secondCateList.length > 0 && this.secondCateList[index])
	this.thirdCateList = this.secondCateList[index].children;

参考：2021-11-22 VUE3控制台出现'Unhandled error during execution of component event handler'警告解决方法 - 码农教程