Understanding and Fixing the Reset Behavior Issue in Element‑Plus Form Component

Problem Description and Reproduction

A developer added an onMounted hook to set initial values for a form field after fetching data, but when the reset button is clicked, the email field is cleared instead of being restored.

Problem Analysis

The reset logic in Element‑Plus calls resetFields , which iterates over form items and invokes resetField . Inside resetField , the current value is overwritten with initialValue . The initialValue variable is set during the component's onMounted hook.

Because the Element‑Plus form component mounts before the user’s component, the onMounted in the user component runs later, so the value assigned there is not recognized as the form’s initial value.

Thoughts

Moving the value assignment to onBeforeMount ensures it runs before the form component records its initial value. However, when the data is fetched asynchronously, simply awaiting the fetch does not guarantee the timing.

How to Modify the Source

Several approaches are proposed:

Patch‑Package : Create a patch for the Element‑Plus source to adjust the initialization logic, but this ties the fix to a specific version.

Vue‑Specific Extension : Extend the original FormItem component, delete its mounted hook, and re‑implement it with custom logic (e.g., listening to localStorage changes) to set initialValue correctly. delete FormItem.mounted const FormItemPatched = { extends: FormItem, mounted() { if (props.prop) { formContext?.addField(context) initialValue = clone(fieldValue.value) window.onstorage = payload => { initialValue = payload } } } }

Fork and Maintain : Fork the Element‑Plus repository, apply the fix directly, and set up a workflow to monitor upstream releases and merge updates as needed.

Summary

The article demonstrates a bug in Element‑Plus form reset behavior, explains why it occurs, and outlines three practical ways to fix it: adjusting the lifecycle order, using patch-package , extending the component, or maintaining a forked version, with the Vue‑specific extension being the most elegant solution for typical projects.