Vee-validate: Strange behavior with v-for directive

[pavel-mironchik]

Versions:

• VueJs: 2.1.10
• Vee-Validate: 2.0.0-beta.21

Description:

I found 2 strange things:
1) If we have such Vue data: { element: 'el', elements: ['el1', 'el2', 'el3'] }
and use vee-validate both on element and element in elements - vee-validate will validate only first.
2) With v-for directive and passing arg property it seems not validate at all

Steps To Reproduce:

I prepared jsfiddle. Delete all in first input - you'll see errors for this input and for 3 other inputs below. Then delete all in 3 lowermost inputs - you'll see no errors.
Hope it describes the problem well.

[logaretm]

They all validate the first input because of the arg, the arg is the same for all the inputs, the plugin uses a vue watcher $watch to track those args, since they are all the same element they all trigger.

The last 3 have an arg of el which doesn't exist in the Vue instance, even if it does in the loop. removing the arg should resolve the issue, but the inputs reset because of v-model for some reason, maybe because both watch for the same input event, which is definitely a bug.

[pavel-mironchik]

For the first case I hoped there will be some workaround, may be scope or something else. But we still can keep this in mind and try to not use the same data names. At least this case worth to be mentioned in documentation, don't you think so?

As for the second case, when I remove the arg and replace v-model with :value - the inputs still resets. May be this note will help to find cause.

[logaretm]

I'm working on the docs atm, trying to separate the actual docs from the UI to make it easier for people to translate it, and for me to update it. I will defiantly add this to the docs to clarify it, thanks!

I will investigate the second issue tho

[ghost]

I'm experiencing a similar problem.

I have an array of objects which I display with v-for.

When I want to validate it, only the last element of the array will be validated, and the error message is displayed on every row.

When I type data in the last element, all the error messages disappear and the program submits the forms even if the first rows are empty.

[logaretm]

Okay, here is an exciting update, the v-validate plugin now checks if the current element has a v-model bound to the element. if it does it will treat that as the arg, otherwise it will continue as before.

https://github.com/logaretm/vee-validate/commit/095cb61d4e669072ebcfce01450b03f3196d7c42

Which should resolve some issues, and reduces verbosity.

[pavel-mironchik]

@logaretm, but wouldn't it cause validation problem like in my fiddle above, when data name el doesn't exist in data{}, but only in v-for loop?

[logaretm]

@brunen9 Sadly it won't, I was talking about the input reset thing. Since I'm only able to extract the string expression, its hard to figure out the context of the for loop iterator and listen for it.

[logaretm]

I've done some manual testing and it seems to be resolved, I will test few more things and will tag the new release.