DateTimePicker 日期时间选择器报错 Cannot read property ‘getHours‘ of undefined, 无法选中`[__ob_: observer__]`时做判断

19 篇文章 0 订阅
在前端开发中,遇到Element UI的DateTimePicker组件因数据类型不匹配导致的错误。该组件要求v-model绑定的数据类型为String,但实际需求是数组。通过在发送请求前临时转换选定时间的格式,解决了这个问题。具体做法是判断选择的时间是否有效,再将其转换为所需的时间戳数组。此外,还分享了如何判断属性值是否存在并进行后续处理的方法。
摘要由CSDN通过智能技术生成

我在一次开发中遇到了这个情况:使用DateTimePicker 日期时间选择器,出现无法选中,
在这里插入图片描述

报错 Cannot read property ‘getHours’ of undefined,
这个原因是,这个DateTimePicker 日期时间选择器 v-model 绑定的属性对应的数据类型,只能是 String() 类型的,其他数据类型均会报错,我这边是因为接口要求,改成了数组类型,所以报错了。

这是个人的部分代码:

  <el-date-picker
          v-model="searchForm.inviteTimeList"
          type="datetime"
          placeholder="选择日期时间"
          style="width: 600px"
        ></el-date-picker>

我个人解决办法: 不要修改其数据类型, 在发送请求前,设置一个变量,把这个值存储到这个变量中,再吧这个变量处理成自己想要的数据类型。

我需要的是数组数据类型,下面贴上我自己的代码

// state.chatSearchForm.inviteTimeList 就是 时间日期选择器 v-model 绑定的值, 数据类型为 String
// Object.prototype.toString.call(inviteTimeListQuery) === '[object Date]'  -代表只有选择了时间日期,这个 v-model绑定的属性才会有数据
// [object Date]  --这个要根据 选中时间日期时, v-model属性获取到值得数据类型来做判断,如果你获取得时间是 时间戳,这里应该是[object Array] , 我这边获取的 标准日期格式的。
// getTime() 是将标准日期格式处理成 时间戳。这里还有更好的处理方法,但是我懒得写了。
let inviteTimeListQuery = state.chatSearchForm.inviteTimeList || '';
    if (Object.prototype.toString.call(inviteTimeListQuery) === '[object Date]') {
      inviteTimeListQuery = [inviteTimeListQuery.getTime()];
    } else {
      inviteTimeListQuery = [];
    }

这样就好了,不会报错了,然后把这个inviteTimeListQuery 处理后的值 传给 后端即可。

有时候数据会包含[__ob_: observer__] 这个,想要做判断某个属性是否有值,可以先判断这个值是否存在,再判断这个值的length,这样就可以判断这个属性是否有值。

// 比如我要判断 courseLists这个属性是否有值,有值就要做其他处理,这样写就只有有值时才会进入这个判断
 this.searchForm.courseLists && this.searchForm.courseLists.length

elementui 一些遇到的其他问题合集: 传送门

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值