Vee-validate: It doesn't work in .Vue file ?
Versions:
- VueJs: 2.1.10
- Vee-Validate: 2.0.0-beta.22
Description:
My Config:
import VeeValidate from 'vee-validate'
Vue.use(VeeValidate)
My Template:
<template>
<div class="main-content">
<h2 class="public-title title is-2 has-text-centered">Signup</h2>
<div class="columns form">
<div class="column">
</div>
<div class="column">
<form @submit.prevent="onSubmit">
<p class="control has-icon">
<input v-model="username" v-validate:username.initial="'required|min:4|max:20'" type="text"
placeholder="Account Name" :class="{'input': true, 'is-danger': errors.has('username') }">
<span class="icon is-small"><i class="fa fa-user"></i></span>
<i v-show="errors.has('username')" class="fa fa-warning"></i>
<span class="help is-danger" v-show="errors.has('username')">
{{ errors.first('username') }}
</span>
</p>
<p class="control has-icon">
<input v-model="name" v-validate:name.initial="'required'" type="text" placeholder="Name"
:class="{'input': true, 'is-danger': errors.has('name') }">
<span class="icon is-small"><i class="fa fa-user-md"></i></span>
<i v-show="errors.has('name')" class="fa fa-warning"></i>
<span class="help is-danger" v-show="errors.has('name')">
{{ errors.first('name') }}
</span>
</p>
<p class="control has-icon">
<input v-model="email" v-validate:email.initial="'required|email'" type="text"
placeholder="Email" :class="{'input': true, 'is-danger': errors.has('email') }">
<span class="icon is-small"><i class="fa fa-envelope"></i></span>
<i v-show="errors.has('email')" class="fa fa-warning"></i>
<span class="help is-danger" v-show="errors.has('email')">
{{ errors.first('email') }}
</span>
</p>
<p class="control has-icon">
<input class="input" type="password" v-model="password" placeholder="Password">
<span class="icon is-small"><i class="fa fa-lock"></i></span>
<span class="help is-danger">
</span>
</p>
<p class="control has-icon">
<input class="input" type="password" v-model="confirm_password" placeholder="Confirm the password">
<span class="icon is-small"><i class="fa fa-lock"></i></span>
<span class="help is-danger">
</span>
</p>
<div class="control is-grouped">
<p class="control form-button">
<button class="button is-primary" type="submit">Signuo</button>
</p>
</div>
</form>
</div>
<div class="column">
</div>
My Js:
var signup = {
username: '',
name: '',
email: '',
password: '',
confirm_password: ''
}
export default {
name: 'signup',
data: function () {
return signup
},
methods: {
onSubmit: function () {
console.log(222)
}
}
}
I use vee-validate in a vue compnent file which name is signup.vue. But the validate don't work. I can't watch the error message with error value. Please helpe me? Thanks!
Steps To Reproduce:
When I add the ele name="XXX", I can watch the error message.
atricfox
All 10 comments
@atricfox by any chance are you using nuxt.js?
Im having similar issues:
Property or method "errors" is not defined on the instance but referenced during render
deyceg
on 8 Feb 2017
@deyceg no,I didn't use any 3rd js file. Yet I found not any message, as errors also. It just dosen't work as a validation, in addition,things run ok.
atricfox
on 8 Feb 2017
Ah ok, will have to raise a separate issue for mine then! Although I think its probably Nuxt thats causing the issue.
deyceg
on 8 Feb 2017
@deyceg I think I found the reason.When I add the ele name="XXX", I can watch the error message. You maybe try it.
atricfox
on 8 Feb 2017
@deyceg did you resolve the problem Property or method "errors" is not defined on the instance but referenced during render ?
RockyNiu
on 31 Mar 2017
@deyceg my solution is to install 2.0.0-beta.17
RockyNiu
on 31 Mar 2017
I have the same problem:
Property or method "errors" is not defined on the instance but referenced during render
I try to install 2.0.0-beta.17 but didnt work
50l3r
on 22 Oct 2017
Same issue for me in vue file.
mehdichati
on 5 Jan 2018
@mehdichati There are a lot of errors that can cause this, create an example on codesandbox and produce the error and I will be happy to point out the solution.
logaretm
on 5 Jan 2018
Hello Abdelrahman,
I found the issue for my case.
Thanks a lot for your great work on this component.
Mehdi
On Fri, Jan 5, 2018 at 7:25 PM, Abdelrahman Awad notifications@github.com
wrote:
@mehdichati https://github.com/mehdichati There are a lot of errors
that can cause this, create an example on codesandbox and produce the error
and I will be happy to point out the solution.—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/baianat/Vee-validate/issues/297#issuecomment-355628348,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AF9aY8HoO9f7SeOo6COqhKDPeeGWUOCLks5tHmkXgaJpZM4L6jEM
.
mehdichati
on 7 Jan 2018
Youdaman
·
MaxMilton
·
yyyuuu777
·
DanielPe05
·
the94air
·
Most helpful comment
@atricfox by any chance are you using nuxt.js?
Im having similar issues: