How to use vuelidate in vue3 with decorator

Question

Good afternoon!

I'm trying to use vuelidate in vue3 with vue-facing-decorator, but I'm not succeeding. In vue2 I can call vuelidate inside @Componet according to the code below, but in vue3 this doesn't work and I also can't use this.$v.touch(), reset(). invalid()...

How to use vuelidate with decorators in vue3?

<script lang="ts"> 
    import { Component, Vue } from 'vue-facing-decorator';
    
    @Component({
       validations:{}
    })
    
    export class Calendario extends Vue {
       created() {

       }
    }
    export default Calendario;
</script>

I read documentations of vue3 and vuelidate, as well as other comments like this: https://vuelidate-next.netlify.app/ but nothing works

Answer 1

useVuelidate returns a computed, so you need to use .value when accessing any of it's properties, like $error, $validate inside the setup function.

In the template it is unwrapped for you.

Example:

const submitForm = async () => {
  const isFormCorrect = await v$.value.$validate();
  if (isFormCorrect) {
    // handleSubmit();
  }
};