Cannot validate dynamic input fields in vue.js using vee-validate - vue.js

Question

I am generating some inputs fields on my vue component page dynamically like given in below code:
Script part:
data(){
return {
forminputs: [
{
fairPaid: '',
}
],
}
Component:
<tr v-for="(input,k) in forminputs" :key="k">
<td>
<input v-validate="'required'" name="fairPaid" type="text" :class="['form-control', {'is-invalid': errors.has('fairPaid')}]" v-model="input.fairPaid">
<div v-show="errors.has('fairPaid')" class="invalid-feedback">
{{ errors.first('fairPaid') }}
</div>
</td>
</tr>
The fields are being validated but there is one issue if the error is on one input field but the error message gets displayed in all input fields. The error message should be there on the field where the error occurs and i don't want to change the field name. Any suggestions will be highly appreciated

Answer 1

The errors are associated by the input's name attribute, so those should be unique. Instead of just 'fairPaid', bind 'fairPaid' + k (with the v-for's k index as a suffix) to name, and use that as a key in the errors bag:
<tr v-for="(input,k) in forminputs" :key="k">
<td>
<input v-validate="'required'" :name="`fairPaid${k}`" type="text" :class="['form-control', {'is-invalid': errors.has(`fairPaid${k}`)}]" v-model="input.fairPaid">
<div v-show="errors.has(`fairPaid${k}`)" class="invalid-feedback">
{{ errors.first(`fairPaid${k}`) }}
</div>
</td>
</tr>