Vue3+Vuelidate2 Options API嵌套数组验证报错求助

问题根源 #

你访问嵌套数组错误信息的路径有误，Vuelidate中$each的错误结构并非通过多层$response嵌套。第一层数组的错误存储在sensors.$each.$errors中，每个数组项的sensor_settings嵌套数组错误，直接挂在对应项的sensor_settings.$each.$errors下，无需再通过$response访问。

修正后的错误访问路径 #

将原路径：

v$.form.sensors.$each.$response.$errors[index].sensor_settings.$each.$response.$errors[i].field_name

改为：

v$.form.sensors.$each.$errors[index].sensor_settings.$each.$errors[i].field_name

额外优化建议 #

1. 简化布尔验证器：你自定义的has_alarm布尔验证可以替换为Vuelidate自带的boolean验证器，无需手动判断：

has_alarm: {
  boolean
}

2. 空数组边界处理：如果sensors或sensor_settings为空数组，访问索引时要做判空，避免Cannot read properties of undefined错误，比如：

// 检查数组存在且索引有效
if (v$.form.sensors.$each.$errors[index]?.sensor_settings?.$each?.$errors[i]) {
  // 访问错误信息
}

模板中错误展示示例 #

如果要在模板中遍历显示所有错误，可以这样写：

<template>
  <div v-for="(sensorError, index) in v$.form.sensors.$each.$errors" :key="index">
    <p v-if="sensorError.position">传感器{{index+1}}位置必须是大于等于0的整数</p>
    <div v-for="(settingError, i) in sensorError.sensor_settings?.$each?.$errors" :key="i">
      <p v-if="settingError.has_alarm">设置{{i+1}}的has_alarm必须是布尔值</p>
      <p v-if="settingError.min_value">设置{{i+1}}的min_value必须是小数</p>
      <p v-if="settingError.max_value">设置{{i+1}}的max_value必须是小数</p>
    </div>
  </div>
</template>

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