Seeking assistance with a Vue 3 and Vuelidate issue. I followed the configuration guide provided at .
<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>
Encountering an exception every time I try to build the project:
TS2339: Property 'v$' does not exist on type '{ onSubmit(): void; }'.
127 | methods: {
128 | onSubmit (): void {
129 | this.v$.$validate()
| ^^
130 | }
131 | }
132 | }
Unclear why TypeScript is unable to build the code correctly. Any insights into what might be causing this issue?
Note: I attempted to resolve by running
npm install --save-dev @types/vuelidate