Add warning message for when useForm() values ref is mutated

[cinderisles]

I was trying to figure out why mutating values here did not seem to run validation

const { values, meta } = useForm({ /* ... */ })

<input v-model="values.username" />
<input v-model="values.password" />

<button :disabled="!meta.valid">submit</button>

Until I read the docs more closely on this page.

values is

A reactive property that contains the current form values, you should not try to mutate it directly.

It would be nice if there was a warning message at runtime or if there was a more prominent place in the docs to put this warning.

---

just because I'm curious, is there a specific reason that validation does not run when values is mutated? I suppose as a workaround I could watch(values) and manually trigger validation each time. or using the example above, I could do this

<input
  :value="values.username"
  @input="setFieldValue('username', $event.target.value)"
/>
<input
  :value="values.password"
  @input="setFieldValue('password', $event.target.value)"
/>

[logaretm]

Perhaps it is finally time to mark it as read only. But that's for 4.10

The reason is, vee-validate needs to know about the context of the mutation, or rather the intent. Is it a user input? Is it a reset? Is it initial value setting?

Without context provided by the various mutation methods like 'setFieldValue' or 'handleChange' or 'resetForm' then it would be hard to tell whether it should validate or not.

Thanks for bringing this up. I will mark it read only which would make warnings show up.

[cinderisles]

would it be possible to add an option for validateOnValueUpdate like useField's valueref has?

[logaretm]

Sadly no, because like I mentioned:

Is it a user input? Is it a reset? Is it the initial value setting?

This could be something to consider for v5 if we force error messages to be present at all times which would make this possible.

[0x6a68]

@logaretm this is not a minor change it breaks existing implementations.

[dante4rt]

I am getting an error when updating the Vue version to 3.4.5. Now my tests are broken and they say:

[Vue warn] Set operation on key "blablabla" failed: target is readonly.

I use ref in my component.