actual combat 33 —— Vue实战遇到的问题

一、时间范围选择器两个字段转一个字段

        <el-form-item label="证明有效期开始时间：">
            <el-date-picker
                v-model="validTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd">
            </el-date-picker>
        </el-form-item>

  data() {
    return {
      validTime: [],
      // 表单参数
      form: {},
    }
}
methods: {
    // 表单重置
    reset() {
      this.form = {
        id: null,
        firstId: null,
        qualificationName: null,
        qualificationType: null,
        qualificationGrade: null,
        qualificationUrl: null,
        validStartTime: null,
        validEndTime: null
      };
      this.validTime = ['', ''];
      this.resetForm("form");
    },
        /** 查看资质信息详情 */
    viewDetail(row) {
      this.reset();
      console.log("=====" + row.id)
      getFirstQualification(row.id).then(response => {
        this.form = response.data;
        this.view = true;
        this.title = "客户资质信息详情";
        this.validTime[0] = this.form.validStartTime;
        this.validTime[1] = this.form.validEndTime;
      });
    },
        /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id
      getFirstQualification(row.id).then(response => {
        this.form = response.data;
        this.validTime = [this.form.validStartTime, this.form.validEndTime]
        // this.validTime[0] = this.form.validStartTime;
        // this.validTime[1] = this.form.validEndTime
        alert(this.validTime);
        this.open = true;
        this.title = "修改客户资质信息";
      });
    },
        /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        let startTime = null;
        let endTime = null;
        if (this.validTime != null) {
          console.log("this.validTime" + this.validTime);
          startTime = this.validTime[0];
          endTime = this.validTime[1];
        }
        this.form.validStartTime = startTime;
        this.form.validEndTime = endTime;
        if (valid) {
          if (this.form.id != null) {
            console.log(this.form,"123456789")
            updateFirstQualification(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            this.form.firstId = this.firstIdScope;
            console.log("新增的数据：" + this.form)
            addFirstQualification(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
}

遇到的坑就是修改按钮，数据不能回显，###

• 正确写法：
  this.validTime = [this.form.validStartTime, this.form.validEndTime]
• 错误写法：
  // this.validTime[0] = this.form.validStartTime;
  // this.validTime[1] = this.form.validEndTime