V4 How to watch fields values changes [Element Plus + Vee Validate v4]

[thamibn]

What happened?

How can i watch field values using Vee Validate v4 and Element Plus together with Yup schemas.

and how can I assign value to another form field dynamically without refreshing everything cause if i use initialValues it seems like it re renderes everything and loose what you have typed back to initialValues.

const formSchema = yup.object({
      name: yup.string().required().label("Name"),
      email: yup.string().required().email().label("Email address"),
    });
.......

watch: {
    name: {
      handler(newValue, oldValue) {
        //how can watch the name field and how can i assign email field using value from name field like
        // email = `${newValue}@gmail.com`
      },
    },
  }

Reproduction steps

Copied example form the document and tried to watch form fields and it does nothing, i dont have access to the form fields tried to watch initialValues object nothing happens also

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

No response

Demo link

https://codesandbox.io/s/vee-validate-v4-with-element-plus-framework-forked-x869c?file=/src/App.vue

Code of Conduct

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

[logaretm]

Please keep your questions either in the discussions section or ask on StackOverflow, the issues section is dedicated to actual issues bug reports and suggestions.

To answer your question, if you need to watch the current value you are better off using the composition API here and watch the value property off the useField function.

For setting values you can either assign the value property directly to whatever value you need or use the setFieldValue function.

Here is an example:

https://codesandbox.io/s/vee-validate-v4-with-element-plus-framework-forked-k75l5?file=/src/App.vue

[thamibn]

Thank you very much.