[Vue warn]: Property or method "$v" is not defined on the instance but referenced during render

Question

I use Vue.js for validation but it throws an error:

vue.esm.js?a026:628 [Vue warn]: Property or method "$v" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

But I don't know how to handle it.

Login.Vue:

<template>
<div id="login">
  <CContainer class="d-flex content-center min-vh-100">
    <CRow>
      <CCol>
        <CCardGroup>
          <CCard class="p-4">
            <CCardBody>
              <CForm>
                <h1>Login</h1>
                <p class="text-muted">Sign In to your account</p>
                <CInput 
                  type="text"
                  placeholder="Username"
                  required
                  update:value="username"
                  input:error-messages="usernameErrors"
                  @input="$v.username.$touch()"
                  @blur="$v.username.$touch()"
                  required
                  autocomplete="username email"
                >
                  <template #prepend-content><CIcon name="cil-user"/></template>
                </CInput>
                <CInput 
                  placeholder="Password"
                  input:rules="passwordRules"
                  type="password"
                  required
                  iuodate:value="password"
                  input="$v.password.$touch()"
                  @blur="$v.password.$touch()"
                  @input="$v.password.$touch()"
                  autocomplete="current-password"

                >
                  <template #prepend-content><CIcon name="cil-lock-locked"/></template>
                </CInput>
                <CRow>
                  <CCol col="6" class="text-left">
                    <CButton color="primary" class="px-4" @click="direDisplay">Login</CButton>
                  </CCol>
                  <CCol col="6" class="text-right">
                    <CButton color="link" class="px-0">Forgot password?</CButton>
                    <CButton color="link" class="d-md-none">Register now!</CButton>
                  </CCol>
                </CRow>
              </CForm>
            </CCardBody>
          </CCard>
          <CCard
            color="primary"
            text-color="white"
            class="text-center py-5 d-sm-down-none"
            body-wrapper
          >
            <h2>Sign up</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <CButton
              color="primary"
              class="active mt-3"
            >
              Register Now!
            </CButton>
          </CCard>
        </CCardGroup>
      </CCol>
    </CRow>
  </CContainer>
</div>
</template>

<script>
import Dashboard from '../Dashboard.vue';
import { required,minlength,username,password } from 'vuelidate/lib/validators'
import { mapState, mapActions } from 'vuex'
export default {
  name: 'Login',
 methods:{
          direDisplay(){
            
          //  console.log(this.id=this.$refs.groupid.value);
          //   console.log('pasword is ' +password);
            
            //this.$router.push('/Dashboard')
            if (this.data.username==='Abc' && this.data.password==='Abc123@') {
              this.$router.push('/Dashboard') 
           } else {
              alert('password username cannot match');
            }
          }
        }
   }
</script>

I am using vuelidators vulidate librery . i just define it not use it"import { mapState, mapActions } from 'vuex'" — Mama, Apr 13 '20 at 01:26
https://codepen.io/Nilmani/pen/qBOdXwo this is my code pen link — Mama, Apr 13 '20 at 01:47
@Mama Do you have some code that calls `Vue.use(Vuelidate)`, or equivalent? I wouldn't expect it to be in this file, more likely in `main.js` or whatever your main entry file is called. — skirtle, Apr 13 '20 at 02:27
import 'core-js/stable' import Vue from 'vue' import App from './App' import router from './router' import CoreuiVue from '@coreui/vue' import { iconsSet as icons } from './assets/icons/icons.js' import store from './store' import Vuelidate from 'vuelidate' Vue.config.performance = true Vue.use(CoreuiVue) Vue.use(Vuelidate) Vue.prototype.$log = console.log.bind(console) new Vue({ el: '#app', router, store, icons, template: '', components: { App } }) — Mama, Apr 13 '20 at 02:30

score 2 · Answer 1 · answered Dec 02 '20 at 07:17

2

Sorry I don't have enough reputation to comment the post, but, as per this, you need to add validations property in your component.

Maybe we can try that one first as I don't see it in your code

answered Dec 02 '20 at 07:17

Andre Suchitra

143
2
8

score 1 · Answer 2 · answered Oct 21 '21 at 12:25

Make sure you use the vuelidate plugin.

Also make sure you defined the plugin with .use before you created the instance of vue:

import Vuelidate from 'vuelidate'

Vue.use(Vuelidate)

new Vue({
  render: function (h) { return h(App) }
}).$mount('#app')

score 0 · Answer 3 · answered May 27 '22 at 13:24

validations: {
    form1: {
      phone: { required },
      name: { required },
    },
    form2: {
      parol1: { required, minLength: minLength(6) },
    },
    form3: {
      password: { required, minLength: minLength(8) },
      password2: { required, sameAsPassword: sameAs("password") },
    },
  }

try adding validations object to your code before adding it you should call it in your page or component.

[Vue warn]: Property or method "$v" is not defined on the instance but referenced during render

3 Answers3