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");
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.