Vuelidate $v не определен в компоненте Vue

Ничто из того, что я нашел, не решило эту проблему. Я получаю следующую ошибку для этого компонента Vue. Я пытаюсь использовать библиотеку Vuelidate для проверки моей формы. Есть идеи, что мне здесь не хватает?

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>

Мой 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");

javascript vue.js vuejs2 vue-component vuelidate
person GlobalJim    schedule 21.12.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Прежде всего, установите его с помощью этой команды: npm install vuelidate --save

Я бы порекомендовал нам определить его глобально, импортировав его в ваш файл src/main.js следующим образом.

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

После этого импортируйте классы валидатора в свой компонент:

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

Хорошей практикой является определение ваших моделей данных перед написанием проверки, поэтому вы можете сделать это:

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

Теперь вы можете продолжить и определить свои проверки

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

  email:{
    required,email
   }
}

И последнее, что вам нужно сделать, это добавить validations:{} в ваш файл main.js.

person wisdom    schedule 21.12.2020
comment
Я переместил операторы импорта и использования в свой файл main.js, но по-прежнему получаю сообщение об ошибке. - person GlobalJim; 21.12.2020
comment
Я изменил свой ответ, пожалуйста, проверьте его и дайте мне знать - person wisdom; 21.12.2020
comment
добавьте validations: {} в ваш файл main.js. Это должно работать - person wisdom; 21.12.2020
comment
Все еще получаю ту же ошибку. - person GlobalJim; 21.12.2020
comment
Можете ли вы поделиться копией вашего обновленного файла main.js и компонента, который вы пытаетесь использовать для плагина валидатора? - person wisdom; 21.12.2020
comment
Обновил мой вопрос с помощью main.js - person GlobalJim; 21.12.2020
comment
Вы должны определить некоторые данные в своем компоненте. Что-то вроде этогоdata(){ return { name:"", email:"", } } для вашей формы. А также попробуйте удалить этот match: sameAs(this.$v.form.Email), из проверки ConfirmEmail на данный момент, а затем запустите свой код. - person wisdom; 21.12.2020
comment
Добавил функцию данных в мой компонент, все еще получая ошибку. Строка this.$v.form.Email вызывает ошибку. - person GlobalJim; 21.12.2020
comment
match: sameAs(this.$v.form.Email) должно быть написано как match: sameAs('Email') я думаю - person wisdom; 21.12.2020
comment
Я предполагаю, что это сводится к тому, что это недействительно в моем свойстве проверки. Я думаю, это имеет смысл, поскольку это не свойство Vue? В конечном итоге мне помогло использование sameAs(form.email). - person GlobalJim; 21.12.2020
comment
хорошо, это круто. - person wisdom; 21.12.2020