I am currently facing an issue while trying to validate dynamically added input fields. When there is only one row of inputs for validation, everything works as expected.
When it works: https://i.sstatic.net/nNesg.png
However, the problem arises when I add multiple rows. The validation process ends up validating all rows collectively instead of individually. This situation poses a challenge.
Issue scenario example:
https://i.sstatic.net/Phvlj.png
While the documentation recommends assigning a unique id for each :key, I have implemented this suggestion but unfortunately, the problem persists.
This is how I am generating the dynamic inputs:
<!-- Generate input fields and v-model -->
<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"
>
<br>
<span> errors.first(fieldName)}}</span>
To see the issue firsthand, check out this demo: https://codesandbox.io/s/vue-template-rtjj9?fontsize=14
Any suggestions on how I can ensure validation for each dynamically added row?