Pfthb

How are you all using Vuelidate with v-for. I can't seem to get it to work correctly. It either validates each of the text-fields in my form, or it throws an error. I only want it to validate the field that is being entered, and not other fields that are created from v-for.

In the below template you can see the creds in amazonCredsArray are props passed in from the parent component. Depending on the number of hashes in the amazonCredsArray is the number of forms that are created. With the below setup, the text-field below is created multiple times, and Vuelidate validates ALL these fields when just 1 is entered. I have :key defined on the field but it doesn't help.

Template

<template>
<v-container fluid grid-list-lg class="come_closer">
 <v-layout row wrap>
 <v-flex xs12 v-for="creds in amazonCredsArray" :key="creds.id" class="pb-4">
 <v-card class="lightpurple">
 <v-card-title>
 <v-icon class="my_dark_purple_text">language</v-icon>
 <h1 class="title oswald my_dark_purple_text pl-2 pr-5">ENTER YOUR AMAZON CREDENTIALS BELOW</h1>
 </v-card-title>

 <v-form>
 <v-layout xs12 row wrap class="mx-auto" >
 <v-flex xs12>
 <v-text-field
 :error-messages="sellerIdErrors"
 required
 :key="creds.seller_id"
 color="indigo"
 label="Amazon Seller Id"
 v-model="creds.seller_id"
 prepend-icon="person"
 @input="$v.seller_id.$touch()"
 @blur="$v.seller_id.$touch()"
 ></v-text-field>
 </v-flex>

And my offending script:

Script

import validationMixin from 'vuelidate';
import required from 'vuelidate/lib/validators';

var url = "https://bc-only-rates-trimakas.c9users.io";

export default {
 mixins: [validationMixin],
 validations: 
 seller_id: required 
 ,
 props: ["amazonCredsArray"],
 computed:
 sellerIdErrors () 
 const errors = 
 if (!this.$v.seller_id.$dirty) return errors
 !this.$v.seller_id.checked && errors.push('Please provide us your seller id')
 return errors
 ,
 ,