logaretm/vee-validate

useField - reactive field-id not working

Opened this issue · 0 comments

OlliL commented

What happened?

I have to use a uno-ui input-component which has no name and it's id is generated and private. So I need to "find" the input fields ID to make useField work.
It all works until I start giving the field an initial value. No matter if i use the initialFieldValue option, use setValue or setting value. The moment I try to set a field value programatically the field validation breaks. The errorMessage is no longer printed out.
Validation still works in the background somehow (preventing submitting for example) but it looks like the reference to the error message returned by useField is detached from the field registered and validated in vee-validate.

Reproduction steps

  • Open Stackblitz link
  • notice: input field display "hugo" (an error message should be shown because the input field should contain at least 7 chars)
  • hit submit
  • notice: nothing happens - still no error message shown, no alert window pops up (which should on a successful submit)
  • now uncomment setValue(props.modelValue); at the end in InputText.vue
  • hit submit
  • notice error message shown

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

  • Firefox
  • Chrome
  • Safari
  • Microsoft Edge

Relevant log output

No response

Demo link

https://stackblitz.com/edit/puuk1z-8qgtme?file=src%2FInputText.vue

Code of Conduct