Vee-validate: Validation of dynamic inputs

[Braunson]

Versions:

• VueJs: 2.5.13
• Vee-Validate: 2.0.4

Description:

I can't seem to get validation properly working on dynamically added inputs. My issue is when I start filling out the dynamic fields, it triggers the validation and even when they are filled (it's required) it still shows the The XX field is required. below each field and stops the validation method from proceeding regardless if it's filled or not.

Steps To Reproduce:

<template>
<div v-for="(contact, index) in contacts">

    <div :class="{'form-group': true, 'has-error': errors.has('contacts[' + index + '][first_name]'), 'has-feedback': errors.has('contacts[' + index + '][first_name]') }">
        <label for="first_name">First Name</label>
        <input type="text"
            class="form-control"
            id="first_name"
            v-model="contact.first_name"
            v-validate="{required:true}"
            data-vv-as="first name"
            :name="'contacts[' + index + '][first_name]'">
        <span v-show="errors.has('contacts[' + index + '][first_name]')" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
        <span class="help-block" v-show="errors.has('contacts[' + index + '][first_name]')">{{ errors.first('contacts[' + index + '][first_name]') }}</span>
    </div>

    <!-- ... some other fields -->

</div>
</template>

<script>
export default {
    name: 'contact-create',
    data() {
            return {
                contacts: [],

        // This is the template example that get's injected into 
        // contacts when creating a new 'contact row'
                contact : {
                    first_name: '',
                    last_name: '',
                    phone: '',
                    email: ''
                },
            }
        },
    }
}
</script>

[logaretm]

It could be related to the inputs not having a key attribute which makes vue re-use them. please try o produce this issue in codesandbox if possible and I would be happy to check things out.

[Braunson]

@logaretm I tried adding a key attribute with no luck, I'm sure there's something I'm missing but I'm not sure exactly what it is. https://codesandbox.io/s/n1jz6jl9m

[logaretm]

You had some issues with the name binding, using : or v-bind tells Vue to evaluate the attribute value as an expression. so your string firstName_${index} always get interpreted the same for all fields since you are adding single quotes to your bound expressions so they will evaluate to the same value every time which is: 'firstName_${index}' and not 'firstName_0'.

The second issue is you have a model named contact which confuses vee-validate on which model to watch, the one in the loop context or the one in the component data, so renaming it/ removing it would fix the value detection issue.

Here is a simplified example of yours, that seems to work fine. the list ordering is out of the issue scope:

https://codesandbox.io/s/zr0rqk4x2l

[Braunson]

Thank you @logaretm that fixed it, cheers.