Vue报错:Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘length‘)“

本文讲述了作者在Vue应用中遇到的事件传递问题,当从父组件向子组件发送事件时,由于密码值未正确传递导致form验证失败。通过检查错误和日志输出,发现是由于参数缺失,最终通过删除默认空字符串处理解决了问题。

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

说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家!

问题描述

在主页面通过this.$bus.$emit 发送事件传递参数到子页面,子页面在进行form表单验证事,校验不成功的情况,提示Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘length’)”,如下图所示

在这里插入图片描述

解决方法

首先点击控制台中提示的错误代码行查看代码,发现密码校验时,传递的value的值是undefined未定义的,那么此类型是没有length方法的,所以出错了

在这里插入图片描述

这个错误从字面意思和自己打印调试也很容易明白,但是这里我们只知道是传递的value值类型错误导致的,还需要去代码走查看看是传递错误还是赋值错误,于是在发送事件时console.log输出下数据,来判断是否传递了password,结果发现并没有传递

在这里插入图片描述

既然发送事件时没有传递password参数,那么就回到监听页面看是否有获取传递password参数,如果有的话,那么就会出现undefined的情况,结果发现这里去获取了password

在这里插入图片描述

当出现undefined的情况时,大多数都是未定义或者传递参数不存在导致的,因为password默认值为空String,所以删除这行代码后问题解决~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

cdtaogang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值