时间戳

首页 > 解决方案 > Vuelidate：与 $each 结合的动态验证

vue.js - Vuelidate：与 $each 结合的动态验证

问题描述

我有一组要使用 Vuelidate 验证的对象。

我在 v-for 中渲染这些项目：

v-for='(el,index) in items'

我还创建了一个验证对象：

  validations: {
    items: {
      $each: {
        $each: {
          name: required
        }
      }
    }
  }

所以现在在 v-for 中，我可以这样做：

<span v-if="$v.items.$each[index].$each.name.$invalid">This field is required</span>

这在我的组件被渲染时有效。但是，当向这个 v-for 添加新元素时，我收到一个错误：

_vm.$v.items.$each[index].$each.name 未定义

我认为这是因为验证对象已经构建，这使得数组的索引超出范围。我现在不知道如何重建这些验证或添加任何东西。我找到了一些动态表单示例，但这些示例不适用于 $each。

如何对在 v-for 中呈现的新添加项目进行验证？

标签： vue.jsvuelidate

解决方案

推荐阅读