Loss of object fields after calling setFieldValue

[julienguillot77]

What happened?

I'm using vee-validate with Zod on my Nuxt 3 application.

I have an array of objects that represents some items.

Here is my Zod validation model :

z.object({
    id: z.number().readonly(),
    // some fields are omitted
    items_attributes: z.array(
      z.object({
        id: z.number().nullable().optional().or(z.number().positive()),
       // Some fields are omitted
        _destroy: z.string().default("0"),
      })
    ),
  })

items_attributes are the array of object I'm talking about.

So the _destroy field must be set to "1" to be defined as "marked for destruction". I'm using Rails as backend API.

In order to do that, I click to a button that triggers a function

function onDeleteItem(index: number) {
  let items = values.items_attributes;
  const item = items![index];

  if (item.id) {
    setFieldValue(`items_attributes.${index}._destroy`, "1");
  } else {
    // Remove the item if it doesn't have an id
    items = items!.filter((_, i) => i !== index);

    setFieldValue("items_attributes", items);
  }
}

setFieldValue(items_attributes.${index}._destroy, "1"); This is where the issue occurs. The object at index x has become partial and some fields are missing !

As long as do not edit _destroy value, the issue does not occurs (even if I set it to "0").

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• [ ] Firefox
• [x] Chrome
• [ ] Safari
• [ ] Microsoft Edge

Relevant log output

Demo link

NO

Code of Conduct

• [x] I agree to follow this project's Code of Conduct