diff --git a/.changeset/thick-sheep-drop.md b/.changeset/thick-sheep-drop.md new file mode 100644 index 000000000..424cf9c3e --- /dev/null +++ b/.changeset/thick-sheep-drop.md @@ -0,0 +1,5 @@ +--- +"vee-validate": patch +--- + +fix: show uncontrolled field info in devtools closes #4914 diff --git a/packages/vee-validate/src/devtools.ts b/packages/vee-validate/src/devtools.ts index faee9af3e..fe7477566 100644 --- a/packages/vee-validate/src/devtools.ts +++ b/packages/vee-validate/src/devtools.ts @@ -123,6 +123,7 @@ function installDevtoolsPlugin(app: App) { } const { form, field, state, type } = decodeNodeId(payload.nodeId); + console.log(form, field, state, type, payload); api.unhighlightElement(); @@ -203,6 +204,7 @@ export function registerSingleFieldWithDevtools(field: PrivateFieldContext) { DEVTOOLS_FIELDS[field.id] = { ...field }; DEVTOOLS_FIELDS[field.id]._vm = vm; + onUnmounted(() => { delete DEVTOOLS_FIELDS[field.id]; refreshInspector(); @@ -334,8 +336,8 @@ function getFieldNodeTags( function encodeNodeId(form?: PrivateFormContext, stateOrField?: PathState | PrivateFieldContext): string { const type = stateOrField ? ('path' in stateOrField ? 'pathState' : 'field') : 'form'; - const fieldPath = stateOrField ? ('path' in stateOrField ? stateOrField?.path : unref(stateOrField?.name)) : ''; - const idObject = { f: form?.formId, ff: fieldPath, type }; + const fieldPath = stateOrField ? ('path' in stateOrField ? stateOrField?.path : toValue(stateOrField?.name)) : ''; + const idObject = { f: form?.formId, ff: stateOrField?.id || fieldPath, type }; return btoa(encodeURIComponent(JSON.stringify(idObject))); }