Vuelidate with Vue 3 & vue-class-component & TypeScript

1.9k views Asked by At

I'm trying out Vulidate with Vue 3, but I can't get it to fit into my typical pattern using the vue-class-component & Typescript syntax. I see this similar question, but I expect there have been some breaking changes that cause the same issues I am having, now. Can anyone help translate this?

This example works, and it's what I'm trying to learn to convert:

    <template>
      <div>
        <input type="email" placeholder="Email..."  v-model="email" @blur="v$.email.$touch" :class="{error: v$.email.$error}" >

        <div v-if="v$.email.$error">
          <p v-if="v$.email.email.$invalid && email !==''"
          >Invalid Email</p>
          <p v-if="v$.email.required.$invalid"
          >Required</p>
        </div>

        <button type="submit" style="background-color:yellow"
        >Submit</button>
      </div>
    </template>
    <script lang="ts">
    import useVuelidate from "@vuelidate/core";
    import {required, email} from "@vuelidate/validators";
    
    export default {
      setup () {
        return { v$: useVuelidate() }
      },
      data(){ return{ email: null, } },
      validations:{ email:{ required, email } }
    }
    </script>
    <style scoped lang="scss"> .error{ color:red; } </style>

I've tried a lot of different arrangements, but here's my most recent [broken] script... The immediate problem is, in the template, v$.email is not recognized: Property 'email' does not exist on type 'Ref<Validation<ValidationArgs<unknown>, unknown>>'.ts(2339) Which makes me think I'm not "registering" email with Vuelidate properly.

    <script lang="ts">
    import { Vue, Options } from "vue-class-component";
    import useVuelidate from "@vuelidate/core";
    import {required, email} from "@vuelidate/validators";
    //import { Validate } from "vuelidate-property-decorators"; 
     @Options({
       validations:{
         email:{required,email}
       }
     })
    export default class ValidationsAsClass extends Vue {
      v$ = useVuelidate();
      
      //Use of decorator would be best...
      //@Validate({required,email})
      email = "";
     
    }
    </script>

Any help is greatly appreciated. Any source to learn more about translating standard Vue to class-component syntax would be greatly appreciated, as well.

0

There are 0 answers