使用watch監聽element-ui中的日期時間選擇器

需求：開始時時間大於結束時間，結束時間要大於等於結束時間兩小時。

使用watch監聽開始，結束時間

<template>
    <el-form label-width="100px">
      <el-form-item label="開始時間">
        <el-date-picker
          v-model="value1"
          type="datetime"
          placeholder="選擇日期時間"
          align="right"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="結束時間">
        <el-date-picker
          v-model="value2"
          type="datetime"
          placeholder="選擇日期時間"
          align="right"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
</template>

<script>
export default {
  data() {
    return {
      value1: new Date(),
      value2: new Date(new Date().getTime() + 1000 * 3600 * 2),
    };
  },
  watch: {
   
    value1: {
      handler(newTime, oldTime) {
        if (this.value2 != "" && this.value2 != null) {
          if (new Date(this.value2).getTime() <= newTime.getTime()) {
            this.value2 = new Date(newTime.getTime() + 1000 * 3600 * 2);
            this.value1 = newTime;
          } else {
            this.value1 = newTime;
          }
        } else {
          this.value2 = new Date(newTime.getTime() + 1000 * 3600 * 2);
          this.value1 = newTime;
        }
      },
      immediate: true,
    },
    value2: {
      handler(newTime, oldTime) {
        if (this.value1 != "" && this.value2 != null) {
          if (new Date(this.value1).getTime() >= newTime.getTime()) {
            this.value1 = new Date(newTime.getTime() - 1000 * 3600 * 2);
            this.value2 = newTime;
          } else {
            this.value2 = newTime;
          }
        } else {
          this.value1 = new Date(newTime.getTime() - 1000 * 3600 * 2);
          this.value2 = newTime;
        }
      },
      immediate: true,
    },
  },
};
</script>

immediate表示在watch中首次綁定的時候，是否執行handler方法，值為true則表示在watch中聲明的時候，就立即執行handler方法，值為false，則和一般使用watch一樣，在數據發生變化的時候才執行handler。

在handler方法中，不能以箭頭函數定義，不然this不能指向vue實例。