Vue3组合式函数中Vuelidate日期规则无法动态更新求助

问题根源 #

你遇到的日期验证阈值不更新的问题，核心原因是日期规则初始化时直接使用了响应式值的快照，而非追踪其响应式依赖：

• 数字类型验证正常，是因为Vuelidate对基本类型值会直接读取响应式对象的最新值；
• 日期类型通过new Date(minDate.value)生成时，只会在规则初始化时执行一次，后续minDate更新时，这个日期对象不会重新生成，导致验证规则始终停留在初始值。

解决方案 #

将日期验证规则定义为函数返回值，让Vuelidate在每次验证时重新执行函数，获取最新的响应式阈值：

修改组合式函数中的验证规则 #

假设你的组合式函数useValidation.js中原来的规则定义是：

// 错误写法：日期规则固定为初始值
const rules = {
  numberInput: {
    min: minValue
  },
  dateInput: {
    min: new Date(minDate.value)
  }
}

改成函数返回规则的形式：

// 正确写法：每次验证时重新获取最新阈值
const rules = {
  numberInput: {
    min: minValue
  },
  dateInput: {
    min: () => new Date(minDate.value)
  }
}

另一种方案：用computed包装规则 #

如果需要更明确的响应式追踪，也可以用computed生成整个规则对象，确保minDate变化时规则自动更新：

import { computed } from 'vue'

const rules = computed(() => ({
  numberInput: {
    min: minValue.value
  },
  dateInput: {
    min: new Date(minDate.value)
  }
}))

验证修改效果 #

修改后，当你更新阈值输入框的日期值时，dateInput的验证规则会自动使用最新的阈值，和数字类型的验证表现一致。

内容的提问来源于stack exchange，提问作者Lou-Théo