resetForm() doesn't reset the value inside of a Monaco editor field

[favna]

Hi vee-validate community,

I'm currently in the process of rewriting a React application to Nuxt and I'm having some difficulty with resetForm. I have a text field with the Monaco Editor (through nuxt-monaco-editor) and whenever I call resetForm() I can see the value reset in the vee-validate dev tools in the Vue dev tools extension, but the content of the actual editor doesn't clear.

I've tried a few different ways of binding the value such as using v-model, but none of what I try works.

I'm fairly new to Vue / Nuxt and totally new to vee-validate and for the life of me I cannot figure out how to make sure the value is properly cleared. I find it especially odd because similar functionality worked just fine in the React application (which uses react-hook-form).

The code as it is right now can be found in this branch: https://github.com/sapphiredev/resource-webhooks/tree/refactor/frontend-ui-nuxt
And the code of the older React application can be found in another branch on the same repo: https://github.com/sapphiredev/resource-webhooks/tree/refactor/frontend-ui

When launching either application, the monaco editor with form that has to be reset through a button is in the /post route, navigable through the button on the home page.

Any help would be very much appreciated. Thanks in advance!

[favna]

I ended up digging more thoroughly through the Vue code of nuxt-monaco-editor wherein I found that they offer to bind a modal-value prop. By setting that to :modal-value="value" resetting the form also clears the monaco editor as the vue code of nuxt-monaco-editor has a watch for that property.

[logaretm]

Hey there, sorry for the late reply. I would say that's the correct way of doing it since vee-validate tracks the values separately and you needed to bind it to the editor component.