Vee Validate handling dynamic input rows
You can add rowIndex
to name to make them different
<tr v-for="(row, rowIndex) in dataFields" :key="row.id"> <td v-for="(fieldName, fieldNameIndex) in fieldNames" :key="fieldNameIndex"> <!-- create first row and add valdiation --> <input type="text" class="input-style" v-model="dataFields[rowIndex][fieldName]" v-validate.initial="'required'" :name="fieldName + rowIndex" :data-vv-as="fieldName" > <br> <span @click="clicky()">{{errors.first(fieldName + rowIndex)}}</span> </td></tr>
Note that you can use data-vv-as
to customize the name field in validation message.