Vue2 validation "this.$v.userData.lastName.$error" leads to "Maximum call stack size exceeded"

Question

I have a problem in my project on Vue2 using Vuelidate.I need to implement data validation and in theory "this.$v.userData.lastName.$error" should return true or false, but in result i get an "Maximum call stack size exceeded" error.

<script>
import { validationMixin } from "vuelidate";
import { required } from "@vuelidate/validators";

export default {
  mixins: [validationMixin],
  data() {
    return {
      userData: {
        lastName: "12312",
        name: "",
      },
    };
  },
  validations() {
    return {
      userData: {
        lastName: { required },
        name: { required },
      },
    };
  },

  methods: {
    consoleLog() {
      //This throws an error
      console.log(this.$v.userData.lastName.$error);
    },
  },
};
</script>

<template>
  <div id="app">
    <button @click.prevent="consoleLog">Тест</button>
  </div>
</template>

Please help. This is my first project on Vue. I've been trying to solve the problem all day, but nothing has worked out for me.

Answer 1

There are two versions of Vuelidate, and you've incorrectly mixed them together.

There is the older vuelidate v0.7.7 package, made solely for Vue 2, with validators that come from vuelidate/lib/validators. documentation link

There is also the newer @vuelidate/core package, compatible with both Vue 2 and Vue 3, with validators that come from the separately installed @vuelidate/validators package. documentation link

So your main problem is using older vuelidate 0.7.7 with newer @vuelidate/validators, when you should be using vuelidate/lib/validators. Change your import line to:

import { required } from "vuelidate/lib/validators";

You can uninstall the @vuelidate/validators package since it's not needed. Going forward make sure you always follow the correct documentation for your version of Vuelidate!