This is a companion discussion topic for the original entry at https://vuejsdevelopers.com/2020/03/31/vue-js-form-composition-api/
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: https://gitlab.com/anthonygore/composition-api-form
Note the v-model contract has changed in Vue 3 https://v3.vuejs.org/guide/migration/v-model.html#v-model
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
Yes! You found it! It was the .values instead of .value. Thank you very much!!