添加Vuelidate校验后Array.push无法正常操作表单数组问题

问题根源 #

1. 校验规则中type字段的requiredIf使用了普通函数，导致this指向错误：在Vuelidate的$each校验上下文里，普通函数的this指向当前数组项的校验对象，而非Vue组件实例，无法正确获取openExperience属性，触发异常校验逻辑后影响数组响应式更新。
2. 新数组项添加后，Vuelidate未自动识别数组变化，校验状态未同步更新，导致功能或视图异常。

修复步骤 #

1. 修正校验规则的this指向 #

将type字段的requiredIf回调改为箭头函数，继承Vue组件实例的this：

validations: {
  form: {
    experience: {
      $each: {
        type: {
          // 改用箭头函数，确保this指向Vue组件实例
          requiredIf: requiredIf(() => this.openExperience),
        },
        other: {
          requiredIf: requiredIf((obj) => obj.type === 'Other'),
        },
        noOfMonths: {
          minValue: minValue(0),
          maxValue: maxValue(11),
        },
        noOfYears: {
          minValue: minValue(0),
        },
      },
    },
    name: { required },
    email: { email },
    phone: { numeric },
    dateOfBirth: {
      maxValue(val){
        return this.$dateFns.sub(new Date(),{years: 18}) > new Date(val);
      }
    },
  },
},

2. 手动同步Vuelidate校验状态 #

在addExperience函数中，push新项后手动触发Vuelidate的校验更新，同时增加元素存在判断避免报错：

addExperience(){
  this.form.experience.push({
    employerName: '',
    department: '',
    from: null,
    to: null,
    tillDate: false,
    type: null,
    noOfYears: null,
    noOfMonths: null,
    other: null,
  });
  
  // 手动更新Vuelidate对experience数组的校验状态
  this.$v.form.experience.$touch();
  this.$v.form.experience.$reset();
  
  const elementId = 'experience' + (this.form.experience.length - 2).toString();
  const targetElement = document.getElementById(elementId);
  if (targetElement) {
    targetElement.scrollIntoView();
  }
},

原理说明 #

• 箭头函数的this继承自外层Vue组件实例，能正确获取组件内的openExperience属性，避免校验逻辑异常。
• 调用$touch()和$reset()强制Vuelidate重新计算数组的校验状态，确保新添加的数组项被纳入校验体系，维持响应式更新正常。

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