【问题标题】:[Vue warn]: Property or method "$v" is not defined[Vue 警告]:未定义属性或方法“$v”
【发布时间】: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>

请帮帮我,我一天都解决不了这个问题((((

【问题讨论】:

    标签: javascript vue.js vuejs2 vuelidate


    【解决方案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
        • 如果有效,请不要忘记给老兄点赞:)
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2017-11-14
        • 2020-07-25
        • 2019-12-25
        • 2021-08-22
        • 2019-01-28
        • 2020-02-03
        • 2021-07-17
        相关资源
        最近更新 更多