Vuelidate RangeError: Maximum call stack size exceeded

57 views Asked by At

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();
            }
        },

Error

I want to be able to use the validations

0

There are 0 answers