programing

Vue 구성 요소에 Vuelidate $v가 정의되지 않았습니다.

prostudy 2022. 7. 7. 22:18
반응형

Vue 구성 요소에 Vuelidate $v가 정의되지 않았습니다.

이 문제를 해결한 것은 아무것도 없습니다.이 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>

마이 메인.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");

먼저 다음 명령을 사용하여 설치합니다.npm install vuelidate --save

Import를 통해 글로벌하게 정의할 것을 권장합니다.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파일.

언급URL : https://stackoverflow.com/questions/65386444/vuelidate-v-is-undefined-in-vue-component

반응형