Vee Validate handling dynamic input rows Vee Validate handling dynamic input rows vue.js vue.js

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.

Demo here