Validation state is not reactive (vue2) once I insert new object into an array
I have a row, which is an object with a few properties. This row is part of a form. This form is an array of rows.
I need to insert, let's say, a row in between the 2nd and the 3rd row. I'm using splice to do this.
The form itself is properly reactive, as expected (in vue2), but the validation state for the inserted row is not reactive (that is the errors are not checked/validated).
As a matter of fact, vuelidate works (it validates the errors in the row field) if I push a new row into the form/array (that is, I add it at the end of the array), but it doesn't work if i insert it in between two rows.
In the form component:
<div v-for="(row, i) in form.rows">
<row-comp
row:="row"
:i="i"
/>
</div>The form:
const form = {
date: null,
number: null,
rows: []
}The rows array in the form component (a form with multiple rows) in the form component:
form.rows[0] = {
item: null,
quantity: 0,
product: {
name: null,
code: null,
},
}To insert the new row at position i:
form.rows.splice(i + 1, 0, row);The new inserted row is properly hanled by vue but not by vuelidate, as the errors are not validated,
Note: if I add the new row to the end of the array it works: form.push(row) or rows.splice(length + 1, 0, row)
Source: vuelidate/vuelidate