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.