I am working on upgrading Vue 2
to Vue 3
and I have installed the next version of vuelidate
and I am trying to validate dynamic array of fields, however each time I add a new item to the array it shows an initial error. Is there a way to fix this?
Here is my code, first setup
method:
setup () {
return { v$: useVuelidate() }
},
inside validations
:
currentUser: {
alarm_emails: {
$each: helpers.forEach({
alarm_email: {
required,
email,
maxLength: maxLength(64),
}
})
},
}
and here is the part of the template responsible for the emails:
<div class='sm-12'>
<div
v-for="(email,k) in currentUser.alarm_emails" :key="k"
:class="{ disabled: !email.is_alarm && !currentUser.is_email_alarm}"
class='custom-input sm-12 emailInput additional'
>
<input
type='email'
class=' icon-e-mail'
v-model="currentUser.alarm_emails[k].alarm_email"
@input="clearErrors('emails.' + k + '.alarm_email')" />
<input
type="checkbox"
:id="`email${k}`"
:name="k"
:checked="email.is_alarm"
@input="email.is_alarm = !!$event.target.checked">
<label :for="`email${k}`" />
<i class='icon-bin' @click="removeEmailField(k)" />
<input-error
v-if="errors['emails.' + k + '.alarm_email'] || v$.currentUser.alarm_emails.$each.$response.$errors[k] ? v$.currentUser.alarm_emails.$each.$response.$errors[k].alarm_email : false"
:errors="errors['emails.' + k + '.alarm_email'] ? errors['emails.' + k + '.alarm_email'] : false"
:vuelidate="v$.currentUser.alarm_emails.$each.$response.$errors[k] ? v$.currentUser.alarm_emails.$each.$response.$errors[k].alarm_email : false"
/>
</div>
<i class='icon-plus increment-btn' @click="addEmailField()" />
</div>
and here is my addEmailField
:
addEmailField() {
this.currentUser.alarm_emails.push({alarm_email: '', is_alarm: this.currentUser.is_email_alarm });
},