Clean, Scalable Forms with Vue Composition API

This is a companion discussion topic for the original entry at

Hi Anthony, I’ve been trying to replicate the forms you describe in the post ‘Clean, Scalable Forms… etc’ and so far I’m having no success. When I run a version of the code, NOT using App.vue but a lower lever component a number of issues appear. Props shows empty in the debugger when using value. 2) the emit isn’t returning a value to the outside component it seems Did this example you post ever work, and if so is it available for learning? Thx

Update - by changing the v-model to v-model:value and emiting update:value it’s all working nicely, thx. Not sure if it was the v-model:value or more likely the emit that was failing to update.

Hi Martin. I’m surprised you need to bind to v-model:value as I believe the default prop that v-model binds to is value. Anyway, if you’d like to check against the code I created, here’s the repo:

Note the v-model contract has changed in Vue 3
prop: value -> modelValue;
event: input -> update:modelValue;

Can you tell me where I need to change the code for this? I think I am missing something because my “errors” variable is always empty despite of validation errors in useInputValidator.js.

I spent hours to find my mistake, but wasn’t successfull. I would be very grateful if you could help me.

Check your use of .value on your refs. I think I see a .values instead. Make sure you have Vetur installed in VS Code, it might help catch thinks like that

1 Like

Yes! You found it! :grin: It was the .values instead of .value. :partying_face: Thank you very much!! :grin: