vee-validate icon indicating copy to clipboard operation
vee-validate copied to clipboard

[v4]: useIsFieldTouched is claiming the field was not found

Open MechJosh0 opened this issue 3 years ago • 1 comments

Versions

  • vee-validate: 4.3.1
  • vue: 3.0.11

Describe the bug When using useIsFieldTouched is producing the following error:

[Vue warn]: [vee-validate]: field with name foo was not found 

Although all functionality does continue to work as normal, this error is produced. I assume it's not waiting for the element to be mounted.

To reproduce Use useIsFieldTouched and view the console.

Expected behaviour Do not error, find the correct element.

Demo link

<script lang="ts">
import { defineComponent, Ref } from "vue";
import { Field as FieldValidation, useIsFieldTouched } from "vee-validate";

export default defineComponent({
	components: {
		FieldValidation,
	},
	setup() {
		const isTouched: Ref<boolean> = useIsFieldTouched("foo");

		return {
			isTouched,
		};
	},
});
</script>

<template>
	<div>
		<field-validation name="foo" />
		<div>isTouched: {{ isTouched }}</div>
	</div>
</template>

Additional context When using useFieldError in the same scenario it does not produce this warning so it appears to be isolated to useIsFieldTouched.

MechJosh0 avatar Apr 21 '21 12:04 MechJosh0

The useXXXX variants only work as children of the targets, they do not work as siblings or in the parent component that renders the field.

the useFieldError doesn't warn if it can't find the field which is something I should add. It's more likely that both hooks couldn't find the field.

The docs are very poor with these, I will see what I can do to either enhance the API to include your use case or update the docs with examples on their intended usage.

If you intend to use them as a way to access the validation state from the JS, use useField instead.

logaretm avatar Apr 21 '21 19:04 logaretm