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

我会带着你远行 2024-03-23 20:20 37阅读 0赞

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

### 问题描述 ###

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

### 解决方法 ###

首先点击控制台中提示的错误代码行查看代码，发现密码校验时，传递的`value`的值是`undefined`未定义的，那么此类型是没有`length`方法的，所以出错了  
  
![在这里插入图片描述][5a6b47a0b6c947bc8f9963465b39446e.png]

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

既然发送事件时没有传递`password`参数，那么就回到监听页面看是否有获取传递`password`参数，如果有的话，那么就会出现`undefined`的情况，结果发现这里去获取了`password`  
  
![在这里插入图片描述][43c12663b02e424c90c71c2724f7b554.png]

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

[d03bee857ed14e2f9a8a4da0069dc23b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/1bf35501ce174f6088a88e2a9dc69d25.png
[5a6b47a0b6c947bc8f9963465b39446e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/df7ff1a84e3b4878a98eb5958327869a.png
[700e35780b1d4ab3925be3d9f0dea728.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/f4990a00201a452194a2365ed4dbe21e.png
[43c12663b02e424c90c71c2724f7b554.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/eda8262680f94e00b80b7e933be85d06.png