I'm trying to validate my fields using vuelidate, but i'm having some issues. When i load my forms, my app dies. The error says: "RangeError: Maximum call stack size exceeded"
import { useVuelidate } from '@vuelidate/core';
import { required, helpers, minLength } from '@vuelidate/validators';
<b-form-group label="Org Name" description="">
<b-form-input v-model="$v.orgName.$model" :class="{ 'input-error': $v.orgName.$dirty && $v.orgName.$error }"/>
</b-form-group>
<p v-for="error of $v.orgName.$errors" :key="error.$uid" style="color: darkred">{{ error.$message }}</p>
<span v-if="$v.orgName.$dirty && !$v.orgName.required"></span>
<b-form-group label="Org" description="">
<b-form-input v-model="orgTradeName"/>
</b-form-group>
<p v-for="error of $v.orgTradeName.$errors" :key="error.$uid" style="color: darkred">{{ error.$message }}</p>
<span v-if="$v.orgTradeName.$dirty && !$v.orgTradeName.required"></span>
setup() {
return { $v: useVuelidate() }
},
validations() {
return {
orgName: {
required: helpers.withMessage("required!", required),
minLength: helpers.withMessage('2 characters.', minLength(2))
},
orgTradeName: {
required: helpers.withMessage("required!", required),
minLength: helpers.withMessage(' 2 characters.', minLength(2))
},
}
},
submitForm() {
this.$v.$touch();
if (this.$v.$invalid) {
this.$toast.add({
severity: 'error',
summary: 'error-',
life: 5000
});
} else {
this.updateOrganization();
}
},
I want to be able to use the validations