v-for loop and custom inputs

[Petoches]

Hello,

Been spending hours of search but can't figure out what's wrong.

i have a v-for loop on a fields array

<tr v-for="(field, index) in fields" :key="field.id">
    <td class="py-4 px-2">
        <Text
            v-model="field.label"
            :name="'fields[' + index + ']label'"
            label="label"
            rules="required"
        />
    </td>
</tr>

the Text component is set like that const { value, errors, errorMessage } = useField(toRef(props, "name"), props.rules);

Adding a field to the array works well but when i try to remove one with fields.value.splice(index, 1); it remove the good one on the const fields but it always remove the last one on the vee-validate useForm values so i have two differents array between vue and vee-validate and it triggers validation errors on field when i splice the array.

And visually the v-for seems to display the vee-validate data and not the fields array anymore.

// vee-validate values useForm
{
  "fields": [
    {
      "label": "first_field",
    },
    {
      "label": "second_field",
    }
  ]
}
// vue const fields
[
  {
    "id": 1,
    "label": "first_field",
  },
  {
    "id": 3,
    "label": "third_field",
  }
]

Thanks for your help.

[Petoches]

Ok i finally looped over the useForm values, seems like i was missusing the lib, but still when splicing an index it triggers errors on the following index how can i bypass that ?

edit : Now using const { remove, push, fields } = useFieldArray('fields'); but still have validation errors triggered on push and remove.

[logaretm]

@Petoches Got a live example so I can take a look?

[logaretm]

Closing till you do and I will take a look then.