Skip to content

schema.cast() strips getter properties from initialValues breaking reactivity when using Zod schemas #5048

Open
@sodapng

Description

@sodapng

What happened?

When using vee-validate with Zod schemas and initialValues containing objects with getter properties, the reactivity is lost during form initialization. The issue occurs in the resolveInitialValues function where schema.cast() internally calls zod.parse(), which doesn't preserve getter properties from the original objects

The problematic code is in resolveInitialValues:

function resolveInitialValues<TValues extends GenericObject = GenericObject>(opts?: FormOptions<TValues>): TValues {
  const givenInitial = opts?.initialValues || {};
  const providedValues = { ...toValue(givenInitial) };
  const schema = unref(opts?.validationSchema);
  if (schema && isTypedSchema(schema) && isCallable(schema.cast)) {
    return deepCopy(schema.cast(providedValues) || {}); // <-- This line strips getters
  }

  return deepCopy(providedValues) as TValues;
}

Reproduction steps

  1. Create a form with Zod schema using toTypedSchema
  2. Set initialValues with objects containing getter properties
  3. Observe that getter properties are lost during initialization
  4. Add new items dynamically - they work correctly with getters

Version

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

What browsers are you seeing the problem on?

  • Firefox
  • Chrome
  • Safari
  • Microsoft Edge

Relevant log output

Demo link

https://codesandbox.io/p/devbox/6hzq5y

Code of Conduct

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions