2.1.7: v-model in v-for not working like in 2.0.9

[m-lotze]

Versions

• vee-validate: 2.1.7
• vue: 2.6.5

I recently upgraded from version 2.0.9 to 2.1.7 and had to change the definition of a v-model in a v-for loop to get it working in 2.1.7. Maybe this is a bug.

In 2.0.9 this was working fine:

<template v-for="(customer, index) in customers">
    …
    <input v-model="customer.firstName" … v-validate="'required'">
    …
</template>

In 2.1.7 i had to change it to:

<template v-for="(customer, index) in customers">
    …
    <input v-model="customers[index].firstName" … v-validate="'required'">
    …
</template>

If i use customer.firstName the field is not validated and the errorbag is not updated on input changes.

[logaretm]

Sorry for the long response, due to implementation changes to the directive. The v-for loops had a lot of issues with the model detection, I will try to explain them briefly here:

Internally vee-validate directive uses $watch to detect changes to inputs bound with v-model, using the same expression passed to the model as the watch arg. That wouldn't work since customers.firstName only exists inside the loop context, so vee-validate cannot find the model and thus cannot detect its changes.

I suggest you take a look at ValidationProviders as they are the new way to use vee-validate and provide greater flexibility and do not have the same limitations as the directive.