Vuelidate $v 在 Vue 组件中未定义

Question

我发现没有任何东西可以解决这个问题。我收到此 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");

Answer 1

首先，使用以下命令安装它：

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

。

Answer 2

我正在使用 Vue 3，在提交之前尝试验证表单时遇到了同样的问题。

我用

this.v$._value.$validate()

而不是

this.v$.$validate()

解决了这个问题。

原代码：

let submitForm = async () => {
    const isFormCorrect = await this.v$.$validate();  // didn't work
    if (isFormCorrect) {
        console.log("Form is valid");
    } else {
        console.log("Form is invalid");
    }
};

固定代码：

let submitForm = async () => {
    const isFormCorrect = await this.v$._value.$validate(); // worked
    if (isFormCorrect) {
        console.log("Form is valid");
    } else {
        console.log("Form is invalid");
    }
};