vue.js - Datepicker从接口获取数据后，更新时不选时间会报错value.getTime() is not a function

问题描述

问 题

Datepicker从接口获取数据后，更新时如果不重新选择时间的话会报错value.getTime() is not a function，
如果重新选择时间就不会报错。

---

        <Form-item label="开始日期" prop="beginAt">
          <Date-picker v-model="activityDetails.beginAt" " type="datetime" placeholder="请选择开始日期"></Date-picker>
        </Form-item>
        <Form-item label="结束日期" prop="endAt">
          <Date-picker v-model="activityDetails.endAt" type="datetime" placeholder="请选择结束日期"></Date-picker>
        </Form-item>

          beginAt: [
            {required: true, message: '开始日期不能为空', type: 'date', trigger: 'change'}
          ],
          endAt: [
            {required: true, message: '结束日期不能为空', type: 'date', trigger: 'change'}
          ],

        let beginTime = (new Date(this.activityDetails.beginAt)).getTime();
        let endTime = (new Date(this.activityDetails.endAt)).getTime();

        if (beginTime > endTime) {
          this.$Message.error('开始日期不能大于结束日期！');
          this.loading = false;
          return false;
        } else {
            this.axios.put('/operation/v1/activity', this.activityDetails)
        }

解决方案

补充加回答：在获取接口数据的时候就要把日期类型改成date格式，不改的话获取的是string类型，就会出现上述问题：value.getTime() is not a function.

        this.axios.get('/operation/v1/activity/no/' + this.$route.params.activityNo)
          .then(response => {
            let details = response.data.data;
            details.ifShowName = details.ifShowName === 1;
            details.ifShowPhone = details.ifShowPhone === 1;
            details.ifShowWechat = details.ifShowWechat === 1;
            details.ifShowEmail = details.ifShowEmail === 1;
            details.beginAt = new Date((details.beginAt + '.000Z').replace(' ', 'T'));
            details.endAt = new Date((details.endAt + '.000Z').replace(' ', 'T'));
            this.activityDetails = details;
          })

这篇关于vue.js - Datepicker从接口获取数据后，更新时不选时间会报错value.getTime() is not a function的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！