ElementUI爬坑，[Vue warn]: Error in event handler for "el.form.change": "TypeError: dateObject.getTime

最新推荐文章于 2024-06-28 09:24:04 发布
最新推荐文章于 2024-06-28 09:24:04 发布
阅读量3.9k 收藏 2
点赞数 1
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44999830/article/details/104373500
版权

使用ElementUI自带的DatePicker 日期选择器，加入验证类型为 type="date"时报错

在这里插入图片描述
首先说明出现原因，elementUI的日期选择器【el-date-picker】在加上格式

value-format=“yyyy-MM-dd” format=“yyyy-MM-dd”

和校验规则时

{ type: ‘date’, required: true, message: ‘请选择日期’, trigger: ‘change’ }

由于加入了type=“date”,导致上述的错误

解决方式: 将type改为“string"或者直接删除这一项

原因可能是：elementUI自带的格式转换后会将绑定值转为字符串，而校验规则中的【type: ‘date’】已经不匹配，至于它的报错是因为转换为字符串，不是date对象所以没有getTime这个方法了。

前无止境CSND
关注
专栏目录
vue.runtime.esm.js:619 [Vue warn]: Error in event handler for “el.form.change“: “TypeError: dateObje
郭宝的博客
09-17 1万+
背景： vue.runtime.esm.js:619 [Vue warn]: Error in event handler for "el.form.change": "TypeError: dateObject.getTime is not a function" found in ---> <ElFormItem> at packages/form/src/form-item.vue <ElCol> <ElRow> .
[Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘getAttribute‘ of null“
热门推荐
郭宝的博客
06-24 11万+
错误场景一： 错误提示： 在运行Vue项目时出现了上述错误，出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的，代码如下： // 基于准备好的dom，初始化echarts实例 var bar_dv = document.getElementById('bar_dv'); let myChart = this.$echarts.init(bar_dv) 解...
[Vue warn]: Error in event handler for “el.form.change“: “TypeError: dateObject.getTime is not a fun
前端小白的逆袭
11-01 3545
[Vue warn]: Error in event handler for "el.form.change": "TypeError: dateObject.getTime is not a function"
GoEasy Websocket消息推送集成报错原因与解决方案
GoEasy Websocket消息推送
06-28 1163
在集成GoEasy websocket消息推送的过程中常见的错误与解决方案。
Error in event handler for “el.form.change“: “TypeError: dateObject.getTime is not a function“
m0_59006402的博客
07-02 619
这是做后台管理系统使用element-ui框架时遇到的一个错误 错误代码实例: <el-form-item label="入职时间" prop="timeOfEntry" required> <el-date-picker v-model="form.timeOfEntry" type="date" placeholder="请选择日期" style="width: 220px;" /> </el-form-item> 解决方法1.把检验里面t..
Error in event handler for "el.form.change": "TypeError: dateObject.getTime is not a function"
素味平生的博客
02-04 9352
报错代码示例： <el-form-item label="出生日期" prop="bdat"> <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="请选择出生日期" v-model="entryForm.bdat"> </el-...
Error in event handler for “el.form.change“: “TypeError: dateObject.getTime is not a function“ ————
weixin_44237840的博客
10-12 653
<el-form-item label="服务时间" prop="serviec_time"> <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="请选择服务时间" v-model="from.serviec_time"> </el-date-picker> </el-form-item> 校验规则 serviec_time.
elementUI表单验证报错：Error in event handler for “el.form.blur“: “Error: Unknown rule type name“ found in
kuige188的博客
03-24 3409
elementUI表单验证报错：Error in event handler for “el.form.blur“: “Error: Unknown rule type name“ found in elementUI是一款非常好用的基于vue脚手架的后端框架，表单验证非常好用。但是，今天我爱模板网在使用它进行日期验证的时候出了问题，报Error in event handler for “el.form.change”: "TypeError: value.getTime is not a functio
Error in event handler for "el.form.change": "TypeError: value.getTime is not a function"报错解决方法
tumi
11-20 1818
遇到此问题，可能你会想到将rules里面的type转换成string类型，但有时并不能解决， 如何解决呢？ 先看下面代码： html： <el-form-item prop="startDate"> <el-date-picker type="date" placeholder="选择日期" v-model="startDate" :pi...
正确解决Error in event handler for “click”:”xxx”异常的有效解决方法
wbajsjhhhhh的博客
05-03 3119
正确解决Error in event handler for “click”:”xxx”异常的有效解决方法
element 表单重置 Error in event handler for “el.form.change“: “TypeError: dateObject.getTime is not a fu
unruly02的博客
06-09 544
Error in event handler for "el.form.change": "TypeError: dateObject.getTime is not a function"
报错Error in event handler for “el.form.change“: “TypeError: dateObject.getTime is not a function“
weixin_45113337的博客
08-21 6877
Error in event handler for “el.form.change”: “TypeError: dateObject.getTime is not a function” 调试时报如下错误：Error in event handler for “el.form.change”: “TypeError: dateObject.getTime is not a function” vue文件中代码如下验证rules为 解决办法，将上面验证规则type:date改为type：string，解决
element-ui使用报错（一）TypeError: dateObject.getTime is not a function
xyy1234567891的博客
09-04 5015
出现TypeError: dateObject.getTime is not a function报错 今天在使用element-ui的表单验证的时候，出现了以下报错： 源代码如下： <el-form-item label="直播日期：" style="width: 400px;" prop="date"> <el-date-picker type="date" pl...
vue报错 Error in event handler for “change“: “TypeError: Cannot read properties of null (reading ‘0‘)“
来都来了
01-31 831
methodsgettimerangeDate//定义开始结束时间this0;this1;</
控制台报错 “dateObject.getTime is not a function“ 问题记录
Komorebi_00的博客
04-25 826
elementUI的日期选择器【el-date-picker】加上了格式 value-format=“yyyy-MM-dd” format=“yyyy-MM-dd”，而校验规则使用了type: ‘date’修改验证规则中的type或者直接去掉。
Vue文件报错vue.runtime.esm.js?2b0e:619和1888 Error: [ElementForm]unpected width两个错误
weixin_44679078的博客
04-29 1万+
今天在测试之前写的页面的时候，发现在切换页面的时候报了下面这两个错误。 vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in beforeDestroy hook: "Error: [ElementForm]unpected width " 和 vue.runtime.esm.js?2b0e:1888 Error: [ElementForm]unpect...
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: “TypeError: Cannot read property ‘matched‘
qq_44486437的博客
02-14 1万+
错误截图 踩坑原因 在配置vue-router的路由时和将router实例挂载至Vue实例上时，实例名称没有按照标准 配置vue时 在配置vue-router时，我们一般会将路由的映射关系抽成一个数组，就想下面这样 const routes = [{ path: '', redirect: '/home' }, { path: '/home', component: Home }, { path: '/category', component
vue.runtime.esm.js:587 [Vue warn]: Error in event handler for "click": "TypeError: Object(...) is no
Dear欢儿欢的博客
03-10 1万+
今天在编写前端代码的时候遇到了这个问题： 然后仔细看了一下，原来是自己配置的·问题：大家可以看到，我把这个updateOrderById这个方法放在@/utils/auth这个接口下面 但事实上，我的方法放在@api/shipment下面： 大家可以看到我这个updateOrderById的方法是在shipment.js里面的所以说它就会找不到这个方法，以至于报错,改...
[Vue warn]: Error in event handler for "el.form.blur": "TypeError: Cannot read properties of undefined (reading 'call')"
最新发布
07-24
`[Vue warn]` 错误提示出现在 Vue.js 开发者工具中，通常表示你在某个事件处理器中尝试访问了一个未定义的对象属性。错误信息 `TypeError: Cannot read properties of undefined (reading 'call')` 指示了试图调用某个对象的 `call()` 函数时遇到了 `undefined` 类型的问题。 在 Vue 中，当你使用 `v-model` 或其他组件 API 来绑定数据时，会创建一些内部状态管理器和函数。如果这个组件或数据绑定在特定条件（例如用户交互）下并未正确初始化或挂载，则可能会抛出这种错误。 具体来说，上述错误提示意味着你在处理表单元素的 `blur` 事件时，尝试对一个尚未被正确绑定到实际 DOM 元素的引用上执行 `call()` 方法。这可能是因为： 1. **DOM 加载延迟**：如果你的脚本在页面 DOM 完全加载之前运行，并尝试直接操作某些元素，此时这些元素可能是 `undefined` 的。 2. **异步组件**：当使用动态导入（async components）时，组件可能还没有完全加载好就尝试使用它。 3. **生命周期钩子问题**：如果错误发生在组件的生命周期钩子里（如 `mounted()`, `beforeMount()` 等），而组件还未完成初始化或渲染，可能导致引用的是空对象。 ### 解决方案 #### 验证 DOM 存在性 确保在尝试操作元素之前检查其是否存在： ```javascript document.querySelector('your-form-element').addEventListener('blur', yourEventHandler); ``` 或者在事件处理器内添加检查： ```javascript function yourEventHandler(event) { if (event.target && event.target.nodeName === 'YOUR-SPECIFIC-ELEMENT') { // 执行逻辑 } } ``` #### 使用 Vue 组件的特性 确保在 `created()` 或 `mounted()` 生命周期钩子中设置需要操作的数据或逻辑，避免在初始化阶段触发依赖。 #### 异步组件的处理 对于异步加载的组件，可以使用 `ref` 来获取组件实例，然后在其 `onMounted()` 生命周期钩子中执行所需的操作： ```javascript import YourAsyncComponent from '@/path/to/YourAsyncComponent.vue'; export default { name: 'MyComponent', async mounted() { const componentInstance = this.$refs.yourAsyncComponent; // 使用 componentInstance 进行后续操作 }, }; ``` #### 总结 理解错误发生的上下文并针对性地调整代码结构、等待必要的资源加载完毕或正确验证 DOM 对象的存在性，将有助于解决此类错误。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值