[Vue 警告]：未定义属性或方法“$v”

Posted 2023-02-23

【中文标题】[Vue 警告]：未定义属性或方法“$v”

【英文标题】：[Vue warn]: Property or method "$v" is not defined

【发布时间】：2021-04-20 11:41:40

【问题描述】：

我想对密码匹配进行验证，但出现以下错误：

vue.runtime.esm.js?2b0e:619 [Vue 警告]：属性或方法“$v”未在实例上定义，但在渲染期间被引用。确保 该属性是反应性的，无论是在数据选项中，还是在 基于类的组件，通过初始化属性。看： https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

ma​​in.js

import Vue from 'vue';
import Vuelidate from 'vuelidate';
import VueTheMask from 'vue-the-mask';

Vue.use(Vuelidate, VueTheMask);

Vue.config.productionTip = false;

new Vue(
  router,
  store,
  vuetify,
  render: h => h(App)
).$mount('#app')

我的表单

...

<form action="#" method="GET" @submit.prevent="pswResetHendler">
    <label class="input__label" for="psw">Yangi parolni kiriting</label>
    <input
        class="input input__psw"
        type="password"
        name="psw"
        required
        v-model="password"
        :class=" 'is-invalid': $v.password.$error "
    />
    <label class="input__label" for="psw">Yangi parolni qayta kiriting</label>
    <input
        class="input input__psw"
        type="password"
        name="psw"
        v-model="confirmPassword"
        :class=" 'is-invalid': $v.confirmPassword.$error "
    />
    <span
        class="input__error match-error"
        v-if="!$v.confirmPassword.sameAsPassword"
        >Kiritilgan parollar bir xil bo’lishi lozim, Qayta urinib ko’ring!</span
    >
    <button class="login-btn" type="submit">KIRISH</button>
</form>
 ...

<script>
import  sameAs  from "vuelidate/lib/validators";
export default 
    name: "password-reset",
    data() 
        return 
            password: "",
            confirmPassword: "",
        ;
    ,
    methods: 
        pswResetHendler() 
            this.$v.$touch();
            if (this.$v.$invalid) 
                return;
            
            this.$router.push("/");
        ,
    ,
    validation: 
        confirmPassword:  sameAsPassword: sameAs("password") ,
    ,
;
</script>

请帮帮我，我一天都解决不了这个问题（（（（

【参考方案1】：

我真的很抱歉，伙计们） 我写错了属性validations。我写了

 validation: 
        confirmPassword:  sameAsPassword: sameAs("password") ,
 ,

我不得不写而不是这个

 validations: 
        confirmPassword:  sameAsPassword: sameAs("password") ,
 ,

【参考方案2】：

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

在 main.js 或组件级别导入

【参考方案3】：

替换下面的行

Vue.use(Vuelidate, VueTheMask);

通过

Vue.use(Vuelidate);
Vue.use(VueTheMask);

更多信息请查看article

【讨论】：

好的，无论如何都要应用这个更改！！！你仍然遇到同样的错误吗？

请检查文章的最后几块，他们会使用 mixins 实现相同的功能

我改变了，但我得到了同样的结果（

好吧兄弟，我试试 mixins

如果有效，请不要忘记给老兄点赞：)