Vue3组合式API日期比较报错：dateOfEntrance为null

错误原因 #

你遇到的Uncaught (in promise) TypeError: can't access property "addEventListener", dateOfEntrance is null错误，是因为在Vue组件的script顶层直接调用document.getElementById时，组件的DOM还未完成渲染，此时无法找到对应的表单元素，返回null，进而导致调用addEventListener失败。另外你的错误提示文本逻辑写反了，应该提示“退房日期必须晚于入住日期”而非“早于”。

正确实现方案（Vue3组合式API） #

完全利用Vue的响应式特性，避免直接操作DOM，这是Vue的标准开发方式：

脚本部分（<script setup>） #

<script setup>
import { ref, watch } from 'vue';

// 表单响应式数据
const form = ref({
  date_of_entrance: '',
  date_of_release: ''
});

// 错误提示显示状态
const showDateError = ref(false);
// 提交按钮禁用状态
const isSubmitDisabled = ref(true);

// 日期比较逻辑
const compareDates = () => {
  // 任一日期未填写时，保持按钮禁用
  if (!form.value.date_of_entrance || !form.value.date_of_release) {
    isSubmitDisabled.value = true;
    showDateError.value = false;
    return;
  }

  const startDate = new Date(form.value.date_of_entrance).getTime();
  const endDate = new Date(form.value.date_of_release).getTime();

  if (endDate < startDate) {
    showDateError.value = true;
    isSubmitDisabled.value = true;
  } else {
    showDateError.value = false;
    isSubmitDisabled.value = false;
  }
};

// 监听两个日期字段变化，自动触发比较，初始化时立即执行一次
watch([() => form.value.date_of_entrance, () => form.value.date_of_release], compareDates, { immediate: true });
</script>

模板部分 #

<template>
  <CardBox>
    <FormField label="Entry date & Release date">
      <FormControl
        id="date_of_entrance"
        v-model="form.date_of_entrance"
        name="date_of_entrance"
        :icon="mdiCalendarPlus"
        type="date"
        placeholder="Date of entrance"
        required
      />
      <FormControl
        id="date_of_release"
        v-model="form.date_of_release"
        name="date_of_release"
        :icon="mdiCalendarPlus"
        type="date"
        placeholder="Date of release"
        required
      />
    </FormField>

    <div
      v-show="showDateError"
      class="italic mt-2 text-red-800 text-xs"
    >
      <p>The release date must be after the entry date.</p>
    </div>

    <!-- 绑定提交按钮的禁用状态 -->
    <button id="submit" :disabled="isSubmitDisabled">提交</button>
  </CardBox>
</template>

关键改进点 #

• 用Vue的ref创建响应式状态，替代原生DOM操作，实现视图与数据的自动同步
• 通过watch监听日期字段变化，自动触发比较逻辑，无需手动绑定事件监听
• 用v-show控制错误提示的显示/隐藏，替代原生的classList操作
• 初始化时立即执行比较逻辑，确保页面加载时状态正确
• 修复了错误提示文本的逻辑错误

内容的提问来源于stack exchange，提问作者Derick T.