Error in getter for watcher “parsedValue“: “TypeError: dateStr.match is not a function“

最新推荐文章于 2023-12-29 14:10:16 发布
原创 最新推荐文章于 2023-12-29 14:10:16 发布 · 6.9k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#elementui #vue.js #java

本文讲述了编辑过程中遇到的日期组件数值问题，通过将绑定的Number类型数据转换为String解决报错。同时，强调了后台日期格式转换对于数据回显的重要性。

编辑的时候报错,去百度搜了下，说是页面的el组件的日期组件报错,给该组件绑定的值为Number数据类型,通过监听改一下改成String数据类型就可以.

报错果然不见了，但发现数据也没有回显，查看返回的数据后发现是日期格式并未转换，并且

为Number格式

然后看了一下后台，发现日期格式并未转换，转换一下就可以解决问题了

 

出现 Error in callback for watcher “xx“: “TypeError: this.xx.forEach is not a function“ 解决方法
码农研究僧的博客
03-17 1355
出现 Error in callback for watcher "xx": "TypeError: this.xx.forEach is not a function" 解决方法
报错：Error in getter for watcher “parsedValue“: “TypeError: dateStr.match is not a function“
qq_33911541的博客
04-20 2546
报错：Error in getter for watcher "parsedValue": "TypeError: dateStr.match is not a function"
el-datepicker报错value provided is not in a recognized RFC2822 or ISO format
Littlegirlha的博客
11-02 328
这个报错信息，说明api用的不对。
[Vue warn]: Error in getter for watcher “parsedValue“: “TypeError: dateStr.match is not a function“
Smile_666666的博客
06-25 1万+
1、是由于页面的element ui组件的日期组件报错,组件绑定的值为Number数据类型,改一下改成String数据类型就可以例如下面所示
[Vue warn] Error in getter for watcher “parsedValue“ “TypeError dateStr.match is not a function
bsefef的博客
02-21 5021
遇到这个报错,是页面的el组件的日期组件报错,你给该组件绑定的值为Number数据类型,通过监听改一下改成String数据类型就可以. watch: { 'form.xxx'(val) { this.form.xxx= '' + val; } },
[ElementUI] DatePicker 报错 TypeError: dateStr.match is not a function
weixin_42902669的博客
07-03 1万+
报错描述 在使用 DatePicker 的取日期范围(type="daterange")时遇到如题的报错信息 解决方法 首先是不要设置 value-format 属性, 其次要保证传入的日期数组在的日期为Date类型 报错分析 如果设置 value-format 属性, 则日期在输入及输出 DatePicker 时, 会先做日期格式转换, 错误就是在转换日期格式时出现的, 这可能是个bug, 选取单个日期(type="date")时不会出现这个问题 ...
[Vue warn]: Error in getter for watcher “parsedValue“: “TypeError: dateStr.match is not a function
m0_57364615的博客
11-22 9774
遇到这个报错,是页面的el组件的日期组件报错,你给该组件绑定的值为Number数据类型,通过监听改一下改成String数据类型就可以. watch: { 'form.xxx'(val) { this.form.xxx= '' + val; } },
【vue项目开发遇到的问题】：vue.runtime.esm.js:1887 TypeError: dateStr.match is not a function
m0_69892739的博客
12-29 1981
但是这里有一点需要注意如果不加value-format，时间会回显1970，此时其实就是数据类型的问题，日期选择器接受的数据都是string类型，而我们拿到的值是number类型，我们需要给它加一个String()方法来处理。因为我是在当前的el-table表格中去使用的，是用row去v-model绑定值得，需要知道每一行。所以我在这里用的watch监听，去进行更改。看网上有博主分享原因是因为页面有rules。不能和value-fomatter共存。需要删掉value-fomatter；
Element 报错 dateStr.match is not a function“在使用日期控件时修改日期报错
weixin_43923808的博客
08-24 3160
在使用日期控件时修改日期报错
Element 报错 dateStr.match is not a function“
热门推荐
单飞吧的博客
09-18 3万+
这个错误是因为Element 的日期组件的数据类型不能为Number 解决办法：把数据转换为字符串 val date = toString(12);
elementui 日期选择器报错 dateStr.match is not a function
q879936814的博客
09-13 4721
究其所以，其实就是数据类型的问题，日期选择器接受的数据都是string类型，我们需要给它加一个String()方法来处理。接到需求是想给日期选择器加上默认值，默认为当前日期的前一天。当然我个人更建议在created生命周期钩子中修改此数据。最开始想的思路是，直接给v-model绑定的数据赋值。而直接赋值new Date()就没问题。
elementUi dateStr.match is not a function
MR_SNAIL的博客
08-13 7122
elementUi时间日期控件传值不能为Number类型，必须为String。 watch: { 'form.eventYear'(val) { this.form.eventYear = '' + val; } },
【VUE】elementUI日期组件报错“dateStr.match is not a function“
SZnAl的博客
08-03 6246
elementUI日期组件报错"dateStr.match is not a function"
Element dateStr.match is not a function
我的博客
04-08 2379
element 里面的时间选择控件绑定的值要字符串，不然会报错
vue-select Error in getter for watcher "filteredOptions": "TypeError: e[t.label].toLowerCase is n
cominglately的博客
08-18 8947
场景 分析 解决 场景 sagalbot/vue-select 在组件初始化的时候报的错 Error in getter for watcher “filteredOptions”: “TypeError: e[t.label].toLowerCase is n 下面的是vue-select的相关信息 <v-sele...
TimePicker组件报错收集（一）
qq_40431100的博客
03-28 2224
Error in getter for watcher "parsedValue": "TypeError: Cannot read properties of null (reading 'length')"
解决solr Invalid Date String:'1410943767000'
weixin_33957648的博客
11-18 1097
2019独角兽企业重金招聘Python工程师标准>>> ...
elementui index.vue:438 [Vue warn]: Error in getter for watcher "parsedValue": "TypeError: dateStr.match is not a function
最新发布
07-17
这个警告信息： ``` [Vue warn]: Error in getter for watcher "parsedValue": "TypeError: dateStr.match is not a function" ``` 通常出现在使用 Element UI 的日期选择器组件（`el-date-picker`）时，传入的 `v-model` 值不是一个合法的日期字符串或 `Date` 对象，而是一个非字符串或非日期类型的值（例如 `null`、`undefined`、数字、对象等），导致内部调用 `.match()` 方法时出错。 --- ### 原因分析： Element UI 的 `el-date-picker` 组件内部会对绑定的值进行解析，期望它是一个合法的日期格式（字符串）或 `Date` 对象。如果你传入的是一个非字符串或非 `Date` 类型的值，例如： ```vue <template> <el-date-picker v-model="date"></el-date-picker> </template> <script> export default { data() { return { date: 123456 // ❌ 错误：这不是一个 Date 或合法的日期字符串 } } } </script> ``` 那么在组件内部执行类似 `dateStr.match(...)` 的操作时就会抛出错误： ``` TypeError: dateStr.match is not a function ``` --- ### 解决方案： 确保你绑定给 `el-date-picker` 的 `v-model` 值是以下类型之一： - 一个合法的日期字符串（如 `'2024-01-01'`） - 一个 `Date` 对象（如 `new Date()`） - `null`（如果你允许未选择状态） #### ✅ 正确用法示例： ```vue <template> <el-date-picker v-model="date" type="date" placeholder="选择日期"></el-date-picker> </template> <script> export default { data() { return { date: null // ✅ 合法 // 或者 // date: new Date() // ✅ 合法 // date: '2024-01-01' // ✅ 合法 } } } </script> ``` --- ### 调试建议： 1. 检查你传入 `el-date-picker` 的值是否是合法的日期格式。 2. 使用 `console.log(typeof date, date)` 查看传入值的类型。 3. 如果你从接口获取日期值，请确保返回的是字符串或 `Date` 类型，否则需要进行转换。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值