I have added Vuelidate to my Quasar 2 application with a very simple required validation on an input field. The validation itself works fine but here's my problem:
The component's fetches some data from an API in its onMounted function. This data is used to initially populate the form. For the time loading, however, the input field is evaluated as invalid. Only once data have arrived, the input field becomes valid.
Is it possible to start the validation only once the API call has finished?
Please see the following example on Codesandbox which "simulates" the loading process by adding a timeout of 5 seconds:
https://codesandbox.io/s/condescending-fast-h7ld0c?file=/src/pages/Index.vue
I changed the v-model attribute to use that of Vuelidate and, additionally, use the $error property instead of $invalid.
<q-input
v-model="v$.title.$model"
:error="v$.title.$error"
/>
This seems to work, that is, the field is initially validated until the data have been fetched. If the user then clears the field, it becomes invalid.
https://codesandbox.io/s/prod-forest-7u0916?file=/src/pages/Index.vue