-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Nuxt.js and Vee-Validate Cannot read property 'valid' of undefined
#1148
Comments
Cannot read property 'valid' of undefined
That is a side effect for the fix produced in: vuejs/devtools-v6#499 Adding extra check is the correct way to do it since the fields are added at a later time than the creation time. You can use this issue is mentioned in the flags example (although poorly): http://vee-validate.logaretm.com/examples#flags-example turning ssr to false won't work because your template uses |
I'm using the following versions:
That's how I solved here:
Setting Honestly, I don't understand why this fixed the problem, it was just a lucky guess. Can somebody explain to me? Edit: |
@juniorgarcia read the docs take on this: https://baianat.github.io/vee-validate/concepts/injections.html#disabling-automatic-injection The link may have been changed since the issue you referenced. You still cannot use errors or any injected prop unless your component injects a validator instance which is what you may be missing. |
Versions:
Description:
I've been using Vee-Validate for a year and have used it on multiple nuxt projects.
But I've just ran into something strange today.
I have a basic page that has an area that calls for dynamic components.
Such as this :
This component-block renders a specific template in accordance to what has been selected from the back-end. The nuxt page component makes an http request via
async asyncData
, and works wonderfully and will render the correct component.One of the components that will render is a
contact
component in which I have my form utilizing vee-validate.Here is the code for that component:
Essentially the error I'm getting when viewing the page is :
Cannot read property 'valid' of undefined
So in the code above I isolated this code block:
And found that the issue is that when the page renders it doesn't recognize that 'fields.firstName' exists. Interesting enough I began to just output what
{{fields}}
would return and{{fields.firstName}}' and it showed me results, but if I add
{{fields.firstName.valid}}` throws an error again.So the work around is to make check as so
v-if="fields.firstName && fields.firstName.valid"
.Anyways I find this all to be odd cause I've never experienced this before.
A few more details about my project.
Note: I've set
ssr: false
and then it tells me that it can't find 'errors.has('firstName')`.Just hoping to get an understanding of what is going on.
The text was updated successfully, but these errors were encountered: