Vuetify: Text Field component not behaving correctly with validation (VeeValidate)

[silvioiannone]

Steps to reproduce

1. Create a v-text-field component
2. Apply validation through VeeValidate

Versions

0.14.7

What is expected ?

The component should turn red only if there are errors.

What is actually happening ?

The component is red from the very beginning and there is also an error in the console:

"[Vue warn]: \

Reproduction Link

CodePen

[nekosaur]

This is currently being worked on. We are refactoring the internal validation and how we support 3rd party libraries.

[dxcqcv]

Make data is array will look normal, but also has a warn info [Vue warn]: Avoid using non-primitive value as key, use string/number value instead.

Reproduction Link

codepen

[nekosaur]

@dxcqcv I'm not sure what you're asking. The codepen works without any warning messages. Also please create a new issue for separate problems.

[dxcqcv]

@nekosaur I just got this warn as well, and use another solution to fix it, but I does not test very well, the warn is disappeared, sorry

[Ragura]

This also happens with the built in :rules binding. I'm using it to try to validate input of a v-edit-dialog and the same error pops up. Is there something we can do in the meanwhile?

[nekosaur]

@Ragura Can you reproduce the problem in a codepen?

[Ragura]

Well, this is awkward. It's showing completely different behaviour in a standalone codepen...
https://codepen.io/anon/pen/dzdegz
Here, the validation simply does not prevent the changes to save after closing the edit-dialog, which is normal I guess, considering the use of v-model. However, if I use the standard @change event, it never even validates to begin with.

But, it's not showing the transition warning this time. That's strange, because I have a nearly identical setup in my project (latest version of Vuetify). It's impossible to export my version to Codepen though, because of the structure and dependencies.

I will look into it further and hopefully figure out what's going on.

[johnleider]

This has been resolved on dev for 0.15.0

[SyedAman]

@johnleider I'm on 0.15.0-beta.4 and I'm still getting the same error as OP. Am I on the wrong version?

[TheRoccoB]

Unfortunately I am still seeing [Vue warn]: <transition-group> children must be keyed: <div>.

I tried on 0.15.0-beta.4 and 0.15.3.

[johnleider]

I see the error, but this is confusing to me as all of the elements are keyed.

https://github.com/vuetifyjs/vuetify/blob/dev/src/mixins/input.js#L108
https://github.com/vuetifyjs/vuetify/blob/dev/src/mixins/input.js#L117

[TheRoccoB]

I figured this out.

When string was valid, my rules function was returning undefined and not true. That lead to this strange error.

[johnleider]

So everything is good to go?

[TheRoccoB]

Yeah, just wondering if maybe it makes sense to throw a better error if 'undefined' is returned by the rules function, as others may run into this. I assumed I just needed to return a string if there was an error, otherwise return nothing.

Turns out I needed to return a true.

[johnleider]

Probably could do a better job of explaining it, currently it is only (to my knowledge) defined https://vuetifyjs.com/components/text-fields on #11

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord