使用Vuelidate时触发nextTick报错：TypeError: path.split is not a function的问题求助

你的问题出在对Vuelidate验证规则的结构理解有误——你把数据对象和验证规则混在一起了，导致Vuelidate无法正确解析验证路径，从而抛出path.split is not a function错误。

错误原因分析 #

你原来的代码直接修改了arrOfObj里的每个数据对象，给它们添加了required: true属性，然后把这个修改后的数组作为defValues的验证规则返回。但Vuelidate期望的是独立的验证规则结构，不是把规则嵌在数据对象里。当它尝试解析这些混杂了数据和规则的对象时，会把a、b、c这些数据键当成规则路径来处理，自然会解析失败。

正确的数组验证写法 #

Vuelidate专门提供了$each语法来处理数组元素的验证，你需要用它来定义数组中每个元素的验证规则，完全不需要修改原数据数组。

场景1：验证数组的每个元素（对象）必须存在（非空）

如果你的需求是确保数组里不能有null/undefined的元素，代码应该这样写：

import { required } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      arrOfObj: [{a: 1}, {b: 2}, {c: 3}]
    }
  },
  validations() {
    return {
      arrOfObj: {
        $each: {
          required // 验证数组的每个元素都必须存在
        }
      }
    }
  }
}

场景2：验证每个对象中的特定属性必填

如果是想验证每个对象里的某个属性（比如假设每个对象应该有一个value属性）必须填写，调整规则结构即可：

import { required } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      arrOfObj: [{value: 1}, {value: 2}, {value: 3}]
    }
  },
  validations() {
    return {
      arrOfObj: {
        $each: {
          value: { required } // 验证每个对象的value属性必填
        }
      }
    }
  }
}

关键注意点 #

• 验证规则要和数据结构一一对应，数组用$each包裹元素规则，对象则直接在对应键下定义规则。
• 永远不要把验证规则直接修改到数据对象里，保持数据和规则的分离。

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