Vue3用Vuelidate的helpers.forEach校验对象数组时$response.$errors未定义

1. 最新版Vuelidate（v2.x及以上）已经废弃了$each.$response相关的API，该属性已从源码中移除，直接访问必然返回undefined，进一步读取$errors就会抛出类型错误。
2. 模板中未对深层链式访问做非空兜底，在校验未初始化（如页面刚加载、未触发$validate方法）时，相关校验属性未生成也会导致取值报错。
3. 额外注意：逻辑层setup返回的校验实例命名为v，但模板中使用v$调用，若未做别名映射也会导致属性读取异常。

• 替换为新版$each的标准访问方式：$each[index]直接对应数组第index项的校验实例，和普通单字段校验实例一样，可直接读取$invalid、$errors等属性。
• 用可选链运算符（?.）、空值兜底做非空判断，避免链式访问报错。
• 对齐校验实例的命名，要么修改模板中v$为v，要么在setup返回时重命名为v$。

修改后的代码示例 #

模板层 #

<template>
  <div
    v-for="(input, index) in state.collection"
    :key="index"
    :class="{
      error: v.collection.$each[index]?.name.$errors.length,
    }"
  >
    <input v-model="input.name" type="text" />
    <div
      v-for="error in v.collection.$each[index]?.name.$errors || []"
      :key="error.$uid"
    >
      {{ error.$message }}
    </div>
  </div>
</template>

逻辑层（可选调整，若要保留模板的v$写法） #

export default {
  setup () {
    const rules = {
      collection: {
        $each: helpers.forEach({
          name: {
            required
          }
        })
      }
    }
    const state = reactive({
      collection: [
        { name: '' },
      ]
    })
    const v = useVuelidate(rules, state)
    // 返回时重命名为v$，对齐模板写法
    return { v$: v, state }
  }
}

额外优化（可选） #

如果需要页面加载时就初始化校验状态，避免初始访问为空，可在setup中添加初始化触发逻辑：

import { onMounted } from 'vue'
// setup内部添加
onMounted(() => {
  v.$validate()
})

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