Vue3+Vuelidate Next动态添加数组字段后立即变dirty的解决办法

问题出在Vuelidate Next会自动为新增的数组项创建校验实例，结合required规则，新项的空值会直接触发校验状态标记，导致它立即变为dirty。不需要重置整个currentUser的校验状态，只针对新增项单独重置即可。

具体实现代码 #

// 添加新的告警邮箱项
const newAlarmEmail = {
  alarm_email: '',
  is_alarm: this.currentUser.is_email_alarm
};
this.currentUser.alarm_emails.push(newAlarmEmail);

// 定位到新增项的校验实例并重置状态
const lastIndex = this.currentUser.alarm_emails.length - 1;
this.v$.currentUser.alarm_emails[lastIndex].$reset();

为什么之前的方法无效？ #

this.v$.currentUser.$reset()会重置currentUser下所有字段的校验状态，包括你已经修改过的name、email等字段，完全不符合需求。而单独重置新增项，只会清除该项的dirty、invalid等校验标记，不会影响其他已填写的字段。

额外说明 #

如果需要批量添加多个项，可以循环遍历新增的项，逐个调用对应校验实例的$reset()方法。同时确保你使用的是Vuelidate Next（v2.x）版本，该API在v1版本中存在差异。

内容的提问来源于stack exchange，提问作者Petar Vasilev