Vue中用Vuelidate验证深层嵌套字符串数组遇类型错误求助

看起来你在处理动态嵌套数组的Vuelidate验证时，踩了几个常见的坑——主要是验证规则的层级错误和**$v状态对象的访问路径不对**，导致了"Cannot read property 'props' of undefined"的报错。咱们一步步来解决：

1. 先修正Vuelidate的验证规则 #

你的objects是数组，每个元素里的props也是数组，所以验证规则需要两层$each：先遍历objects数组的每个元素，再遍历每个元素里的props数组。正确的规则应该是这样：

import { required, numeric, maxLength } from 'vuelidate/lib/validators';

validations: {
  formData: {
    name: { required, maxLength: maxLength(64) },
    // 第一层$each遍历objects数组的每个对象
    objects: {
      $each: {
        // 第二层$each遍历每个对象里的props数组的每一项
        props: {
          $each: {
            required,
            numeric,
            maxLength: maxLength(5)
          }
        }
      }
    }
  }
},

2. 重构propsErrors计算属性：用数组索引访问$v #

你之前的问题在于，直接用currentObj去对应$v的结构，但$v是和data里的formData.objects数组严格对应的，必须通过数组索引来访问，而不是对象的id。所以咱们要先找到当前对象在objects数组中的索引，再去获取对应的验证状态：

computed: {
  propsErrors() {
    const errors = [];
    if (!this.currentObj || this.currentPropIndex === null) {
      return errors;
    }
    // 找到当前对象在objects数组中的索引
    const objIndex = this.formData.objects.findIndex(o => o.id === this.currentObj.id);
    // 如果找不到索引，直接返回空数组，避免报错
    if (objIndex === -1) {
      return errors;
    }
    // 拿到当前props项的验证对象
    const propValidation = this.$v.formData.objects[objIndex].props[this.currentPropIndex];
    
    // 如果没被touch过，不显示错误
    if (!propValidation.$dirty) {
      return errors;
    }
    
    // 收集错误信息
    if (!propValidation.required) errors.push('Required');
    if (!propValidation.numeric) errors.push('Digits only');
    if (!propValidation.maxLength) errors.push('Max 5 digits');
    
    return errors;
  }
},

3. 修正文本框的绑定和事件 #

你的模板里有几个小问题：比如v-model的路径、$touch的路径，还有事件里的参数传递。要确保每个文本框都能正确传递当前对象和prop的索引：

<!-- 假设你是用v-for遍历objects数组，oi是对象索引，index是props数组的索引 -->
<v-for="(obj, oi) in formData.objects" :key="obj.id">
  <v-for="(prop, index) in obj.props" :key="`prop-${obj.id}-${index}`">
    <v-text-field 
      single-line 
      flat 
      dense 
      required 
      v-model="formData.objects[oi].props[index]" 
      :error-messages="propsErrors" 
      label="Prop" 
      height="30" 
      @click="setCurrents(obj, index)" 
      @blur="$v.formData.objects[oi].props[index].$touch()" 
      @input="$v.formData.objects[oi].props[index].$touch()" 
    />
    <!-- 可以加删除按钮 -->
    <v-btn @click="removeProp(oi, index)">×</v-btn>
  </v-for>
  <!-- 添加props的按钮 -->
  <v-btn @click="addProp(oi)">Add Prop</v-btn>
</v-for>

4. 完善辅助方法 #

确保setCurrents和添加/删除props的方法能正确维护数组状态，同时保证$v的结构和data同步（Vuelidate会自动跟踪数组变化，但要使用Vue的响应式操作）：

methods: {
  setCurrents(obj, index) {
    this.currentObj = obj;
    this.currentPropIndex = index;
  },
  // 添加props项的方法
  addProp(objIndex) {
    // 用$set保证响应式
    this.$set(this.formData.objects[objIndex].props, this.formData.objects[objIndex].props.length, '');
  },
  // 删除props项的方法
  removeProp(objIndex, propIndex) {
    this.formData.objects[objIndex].props.splice(propIndex, 1);
    // 如果删除的是当前选中的项，重置current状态
    if (this.currentObj?.id === this.formData.objects[objIndex].id && this.currentPropIndex === propIndex) {
      this.currentPropIndex = null;
    }
  }
}

关键注意点 #

• Vuelidate的$v对象结构和你的data结构完全一致，必须严格按照formData.objects[objIndex].props[propIndex]的路径访问，不能跳级。
• 动态操作数组时，要用Vue的响应式方法（比如$set、splice），这样Vuelidate才能正确跟踪变化。
• 要处理边界情况：比如currentObj为null、找不到对象索引的情况，避免出现"undefined"的报错。

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