Vuelidate动态数组字段验证初始错误解决指南

vue.js

2024-03-16 01:40:13

## Vuelidate 动态数组字段验证：消除初始错误

问题概述

在从 Vue 2 迁移到 Vue 3 时，我们可能会在动态数组字段验证中遇到一个恼人的问题。当使用 Vuelidate 对数组中的每个项进行验证时，即使新添加的项尚未编辑，它也会显示初始错误。

问题根源

此问题源自 Vuelidate 的响应式验证系统。当使用 $each 辅助函数验证数组中的每个项时，Vuelidate 会创建一个响应式错误对象。向数组添加新项时，Vuelidate 会自动创建一个新的响应式错误对象，初始包含错误。

解决方案

为了解决这个问题，我们需要确保在向数组添加新项时，正确初始化 Vuelidate 的响应式错误对象。我们可以通过以下步骤实现：

使用 v-model 初始化响应式错误对象

在模板中，使用 v-model 指令将 Vuelidate 实例绑定到验证对象。这将确保在添加新项时，Vuelidate 的响应式错误对象被正确初始化。

<div>
  <input-error
    v-model="v$.currentUser.alarm_emails.$each.$response.$errors[k].alarm_email"
  />
</div>

在添加新项时手动设置初始错误为 null

在 addEmailField 方法中，手动将新添加项的初始错误设置为 null。这将覆盖 Vuelidate 自动创建的初始错误对象，防止其显示错误。

addEmailField() {
  this.currentUser.alarm_emails.push({
    alarm_email: '',
    is_alarm: this.currentUser.is_email_alarm,
    $response: {
      errors: {
        alarm_email: null,
      },
    },
  });
}

代码示例

将上述解决方案应用到我们的示例中，将得到以下代码：

<template>
  <div>
    <input-error
      v-model="v$.currentUser.alarm_emails.$each.$response.$errors[k].alarm_email"
    />
  </div>
</template>

<script>
export default {
  setup() {
    return { v$: useVuelidate() };
  },
  validations: {
    currentUser: {
      alarm_emails: {
        $each: helpers.forEach({
          alarm_email: {
            required,
            email,
            maxLength: maxLength(64),
          },
          $response: {
            errors: {
              alarm_email: null,
            },
          },
        }),
      },
    },
  },
  methods: {
    addEmailField() {
      this.currentUser.alarm_emails.push({
        alarm_email: '',
        is_alarm: this.currentUser.is_email_alarm,
        $response: {
          errors: {
            alarm_email: null,
          },
        },
      });
    },
  },
};
</script>