vee-validate
vee-validate copied to clipboard
[v4]: useIsFieldTouched is claiming the field was not found
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
.
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.