Why I get 'not exist type' Vue 3 + Typescript + Vuelidate?

user_12246403 0
Viewed 661

Can anybody help with Vue 3 and Vuelidate problem?

I configured the vuelidate for by guide the https://vuelidate-next.netlify.app/guide.html.

<script lang="ts">
import { required, minLength, maxLength, numeric } from '@vuelidate/validators'
import useVuelidate from '@vuelidate/core'

export default {
   setup () {
     return { v$: useVuelidate() }
},
data () {
return {
  team: { name: '', shortName: '', city: '', stadium: '', founded: 0, conference: '', division: '' },
},
validations () {
return {
  team: {
    name: { required, $autoDirty: true },
    shortName: { required, minLength: minLength(2), maxLengthValue: maxLength(3), $autoDirty: true },
    city: { required, $autoDirty: true },
    stadium: { required, $autoDirty: true },
    founded: { required, numeric, $autoDirty: true },
    conference: { required, $autoDirty: true },
    division: { required, $autoDirty: true }
  }
}
},
methods: {
onSubmit (): void {
  this.v$.$validate()
    }
  }
}
</script>

When I try to build the project I always get an exception

TS2339: Property 'v$' does not exist on type '{ onSubmit(): void; }'.
127 |   methods: {
128 |     onSubmit (): void {
129 |       this.v$.$validate()
    |            ^^
130 |     }
131 |   }
132 | }

Maybe anyone knows why ts don't want to build the code or maybe I do something wrong?

Note: I tried to install npm install --save-dev @types/vuelidate but it didn't help me

vuelidate vuejs3 typescript
1 Answers

Extending on my comment after checking the guide: Don't use methods in combination with setup(), just put the function in setup as well:

setup() {
    const v$ = useVuelidate();
    const onSubmit = () => {
        v$.$validate();
    };
    return {
        v$,
        onSubmit,
    };
}
user_37371770
Related