Question

我正在尝试验证对象中包含电子邮件的value字段。数组中可能存在许多这些对象。当我评估它是否是$ dirty时，它说Value是不确定的。验证也根本不起作用。假设我访问错误的数组中的数据之前，我从未验证过对象的数组，但是我不确定

示例对象：值将包含我要验证的电子邮件

{
   option: null,
   Value: null,
   Environment: null
}

验证：

validations: {
    defaultFields: {
      $each: {
        Value: { email }
      }
    },
  }

自定义错误功能：这是在第一个If语句上引发错误，但是验证无法正常工作的原因

computed: {
  emailErrors() {
      const errors = [];
      if (!this.$v.defaultFields.$each.Value.$dirty) return errors;
      !this.$v.defaultFields.$each.Value.email && errors.push('You must enter a valid email');
      return errors;
    }
}

这是循环的一个示例，我尝试遍历并验证输入的内容是有效的电子邮件。

<v-form>
    <div v-for="(defaultField, defaultIndex) in defaultFields" v-bind:key="`${defaultIndex}-default`">
        <v-text-field
        @input="$v.defaultFields.$each[defaultIndex].Value.$touch()"
        @blur="$v.defaultFields.$each[defaultIndex].Value.$touch()"
        :error-messages="emailErrors(defaultIndex)"
        id="value"
        v-model="defaultField.Value"
        label="Email Address"
        type="email"
        ></v-text-field>
    </div>
</v-form>

Answer 1

所以我能够弄清楚这一点。我的方法正在接收defaultIndex

:error-messages="emailErrors(defaultIndex)"

位于计算的生命周期挂钩中。将其移至方法生命周期挂钩之后，我能够传递索引并纠正了错误

<v-form>
    <div v-for="(defaultField, defaultIndex) in defaultFields" v-bind:key="`${defaultIndex}-default`">
        <v-text-field
        @input="$v.defaultFields.$each[defaultIndex].Value.$touch()"
        @blur="$v.defaultFields.$each[defaultIndex].Value.$touch()"
        :error-messages="emailErrors(defaultIndex)"
        id="value"
        v-model="defaultField.Value"
        label="Email Address"
        type="email"
        ></v-text-field>
    </div>
</v-form>


methods: {
  emailErrors() {
      const errors = [];
      if (!this.$v.defaultFields.$each.Value.$dirty) return errors;
      !this.$v.defaultFields.$each.Value.email && errors.push('You must enter a valid email');
      return errors;
    }
}

Answer 2

我正在尝试使用 Funkel 方法。但它不起作用。但是如果你像下面这样编写这个电子邮件错误方法，它就可以正常工作。除了 emailErrors 方法，一切正常。

 methods: {
  emailErrors(defaultIndex) {
     const errors = [];
     if (!this.$v.defaultFields.$each[defaultIndex].Value.$dirty) return errors;
     !this.$v.defaultFields.$each[defaultIndex].Value.email && errors.push('You must enter a valid email');
  return errors;
}

}

无法验证对象数组中每个电子邮件值字段上的电子邮件

2 个答案: