gpt4 book ai didi

vue.js - [Vue 警告] : Property or method "$v" is not defined on the instance but referenced during render

转载 作者:行者123 更新时间:2023-12-04 12:59:15 25 4
gpt4 key购买 nike

我使用 Vue.js 进行验证,但它抛出一个错误:

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://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.



但我不知道如何处理。

登录.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>

最佳答案

抱歉,我没有足够的声誉来评论该帖子,但是,根据 this ,您需要添加 validations组件中的属性。
也许我们可以先尝试一下,因为我在您的代码中没有看到

关于vue.js - [Vue 警告] : Property or method "$v" is not defined on the instance but referenced during render,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61180148/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com