I'm facing an issue in my VueJS project with TypeScript where my vue files are divided into HTML, CSS, TS, and vue.
The error message I'm getting is: Property '$router' does not exist on type '{ validate(): void; }'
Here is the breakdown of how my files are organized:
Login.vue :
<template src="./Login.html"></template>
<script src="./Login.ts"></script>
<style src="./Login.css"></style>
Login.html :
<div id="form" align="center" justify="center">
<v-col sm="4" align="center" justify="center">
<v-form ref="form" v-model="valid" lazy-validation>
<v-text-field v-model="login" :label="$t('Username')" required></v-text-field>
<v-text-field v-model="password" :label="$t('Password')" type="password" required></v-text-field>
<v-btn color=primary class="mr-4" @click="validate">
{{ $t('Login') }}
</v-btn>
</v-form>
</v-col>
</div>
Login.ts :
export default {
name: 'Login',
data() {
return {
fields: {
login: '',
password: ''
}
}
},
methods: {
validate() {
if ("admin" === this.login && "admin" === this.password) {
this.$router.push('index')
}
}
}
}
Due to this error, I'm unable to successfully compile my app. Any suggestions or ideas would be greatly appreciated!
Thank you,
Antoine