Vuelidate $v is undefined in Vue component

Question

Nothing I've found has fixed this issue. I am getting the following error for this Vue component. I am trying to use the Vuelidate library to validate my form. Any idea what I am missing here?

Uncaught TypeError: Cannot read property '$v' of undefined




<script>
    import Vue from "vue";
    import Vuelidate from "vuelidate";
    import { required, minLength, email, sameAs } from "vuelidate/lib/validators";
    
    Vue.use(Vuelidate);
    
    const hasUpperCase = (value) =>
      value.match(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\W)/);
    export default {
      validations: {
        form: {
          Email: {
            required: required,
            isEmail: email,
          },
          ConfirmEmail: {
            required: required,
            isEmail: email,
            match: sameAs(this.$v.form.Email),
          },
        },
      },
    };
    </script>

My Main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import vuetify from "./plugins/vuetify";
import Vuelidate from "vuelidate";
Vue.use(Vuelidate);
Vue.config.productionTip = false;

new Vue({
  router,
  store,
  vuetify,
  validations:{},
  render: (h) => h(App)
}).$mount("#app");

wisdom · Answer 1 · 2020-12-21T02:12:57.947

1

First of all, install it using this command: npm install vuelidate --save

I would recommend us to define it globally by importing it in your src/main.js file like this

import Vuelidate from 'vuelidate';
Vue.use(Vuelidate)

After this is done import your validator classes into your component:

import { required, minLength, email, sameAs } from "vuelidate/lib/validators";

A good practice is to define your data models first before writing your validation, so you can do this:

data(){
  return {
   name:"",
   email:"",
 }
}

Now you can go ahead and define your validations

validations:{
  name::{
    required,alpha
  },

  email:{
    required,email
   }
}

One last thing you need to do is add validations:{} in your main.js file.

edited Dec 21 '20 at 02:12

answered Dec 21 '20 at 02:00

wisdom

230
2
10

I moved the import and use statements to my main.js file, but I am still getting the error. – GlobalJim Dec 21 '20 at 02:08
I have modified my answer, please check it out and let me know – wisdom Dec 21 '20 at 02:13
add `validations: {}` to your main.js file. That should work – wisdom Dec 21 '20 at 02:14
Can you share a copy of your updated main.js file and the component you are trying to use the validator plugin – wisdom Dec 21 '20 at 02:18
Updated my question with the main.js – GlobalJim Dec 21 '20 at 02:21
You have to define some data in your component. Something like this`data(){ return { name:"", email:"", } }` for your form. And also try removing this `match: sameAs(this.$v.form.Email),` from the ConfirmEmail validation for now and then run your code. – wisdom Dec 21 '20 at 02:25
Added a data function to my component still getting the error. The this.$v.form.Email is the line that is causing the error. – GlobalJim Dec 21 '20 at 02:31
`match: sameAs(this.$v.form.Email)` should be written as `match: sameAs('Email')` i guess – wisdom Dec 21 '20 at 02:37
I guess it comes down to "this" not being valid in my validations property. I guess that makes sense since it isn't a Vue property? Using sameAs("form.email") is what ultimately worked for me. – GlobalJim Dec 21 '20 at 03:17
This does not address the use of $v in SFC's. – Reverse Engineered May 17 '23 at 03:37

Vuelidate $v is undefined in Vue component

1 Answers1