Error in v-on handler (Promise/async): “TypeError: Cannot read property ‘format‘ of undefined“

最新推荐文章于 2024-08-04 00:00:00 发布

心若向阳(*￣︶￣)

最新推荐文章于 2024-08-04 00:00:00 发布

阅读量4k

点赞数 1

分类专栏：个人项目知识累积 ant-design vue 文章标签：日期选择器 a-range-picker antd vue moment

本文链接：https://blog.youkuaiyun.com/agua001/article/details/116791962

版权

个人项目同时被 3 个专栏收录

144 篇文章

订阅专栏

知识累积

129 篇文章

订阅专栏

ant-design vue

58 篇文章

订阅专栏

本文档描述了在使用Ant Design的日期范围选择器时遇到的问题及解决方案。当用户清空时间选择后，搜索导致浏览器报错。通过在`getQuery`方法中增加对时间选择器值的判断，避免了空值导致的错误。同时，修复了点击重置按钮后再搜索时的长度错误，通过在重置后设置时间选择器值为空数组来防止问题发生。这展示了前端开发中处理用户输入和表单验证的重要性。

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

1、代码贴上：

html
<a-form-item label="异常数据发生时间：">
 <a-range-picker
    :ranges="{ '今天': [moment(), moment()], '这个月': [moment(), moment().endOf('month')] }"
    show-time
    format="YYYY/MM/DD HH:mm:ss"
    v-decorator="['happenTime']"
    @change="getTime"
  />
</a-form-item>
js
//获取页面搜索条件
getQuery(){
 let startTm = this.form.getFieldValue('happenTime') ? this.form.getFieldsValue().happenTime[0].format(
   'YYYY-MM-DD HH:mm:ss'): null
 let endtm = this.form.getFieldValue('happenTime') ? this.form.getFieldsValue().happenTime[1].format(
   'YYYY-MM-DD HH:mm:ss'): null
 let query
 // 无时间筛选
 if(!startTm || !endtm) {
   query = {
     stationName: this.form.getFieldsValue().stationName,
     stationType: this.form.getFieldsValue().stationType,
     region: this.form.getFieldsValue().region,
     deviceType: this.form.getFieldsValue().deviceType
   }
 } else {
   query = {
     stationName: this.form.getFieldsValue().stationName,
     stationType: this.form.getFieldsValue().stationType,
     startTm,
     endtm,
     region: this.form.getFieldsValue().region,
     deviceType: this.form.getFieldsValue().deviceType
   }
 }
 return query
},

2、页面效果：

在这里插入图片描述

3、点击确认获取到时间值，点击搜索也确实拿到时间的参数值，但是，如果你清空掉时间值，然后点击搜索，浏览器就直接报错：

在这里插入图片描述

4、解决：

//获取页面搜索条件
getQuery(){
  console.log(this.form.getFieldValue('happenTime').length)  // 判断是否选中或者清空
  let startTm = this.form.getFieldValue('happenTime').length > 0 ? this.form.getFieldsValue().happenTime[0].format(
    'YYYY-MM-DD HH:mm:ss'): null
  let endtm = this.form.getFieldValue('happenTime').length > 0 ? this.form.getFieldsValue().happenTime[1].format(
    'YYYY-MM-DD HH:mm:ss'): null
  let query
  // 无时间筛选
  if(!startTm || !endtm) {
    query = {
      stationName: this.form.getFieldsValue().stationName,
      stationType: this.form.getFieldsValue().stationType,
      region: this.form.getFieldsValue().region,
      deviceType: this.form.getFieldsValue().deviceType
    }
  } else {
    query = {
      stationName: this.form.getFieldsValue().stationName,
      stationType: this.form.getFieldsValue().stationType,
      startTm,
      endtm,
      region: this.form.getFieldsValue().region,
      deviceType: this.form.getFieldsValue().deviceType
    }
  }
  return query
},

5、需要根据具体情况去给判断条件，有时是 instanceof Object,打印选中日期和未选中的值去做比较就好

6、追加：点击重置按钮，再点击搜索，报length的错, 解决如下：

// 点击重置
handleReset() {
  this.form.resetFields()
  // 防报错，赋值空数组
  this.form.setFieldsValue({
    happenTime: []
  })
},

心有所期，全力以赴，定有所成！