I need to use Typescript for the first time and it's in a Vue 2 project. I'm trying to write a simple Login component (actually it's in views) and I get a few type errors that I can't find a solution for.
(Actually the type errors don't prevent it from running on localhost (everything seems to work fine) but I can't host it the website because I can't run 'npm run build' as it won't finish with the errors.)
Would really appreciate any help!
Login.vue
<template>
<div>
<div class="wrapper">
<div class="form">
<h1 class="title">Login</h1>
<div class="tile is-vertical is-8">
<b-field label="Email">
<b-input type="email" icon="email" v-model="email"/>
</b-field>
<b-field label="Password">
<b-input icon="lock" type="Password" password-reveal v-model="password" validation-message="Succeeded!"/>
</b-field>
<b-message type="is-danger" v-if="error">
</b-message>
<b-button class="is-primary login-button" @click="login">Login</b-button>
</div>
<GoogleLogin />
<div class="register-wrapper">
<p>Don't have an account yet? <router-link :to="{path: '/register'}"> Register here</router-link></p>
</div>
</div>
</div>
<Footer/>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import GoogleLogin from "@/components/GoogleLogin.vue";
import Footer from "@/components/Footer.vue";
import firebase from "firebase/app";
import "firebase/auth";
import { mapGetters } from "vuex";
export default Vue.extend({
components: {
GoogleLogin,
Footer
},
computed: {
...mapGetters(["user"]),
nextRoute() {
return this.$route.query.redirect || "/profile";
}
},
data() {
return {
email: '',
password: '',
error: ''
}
},
watch: {
user(auth) {
if (auth) {
this.$router.replace(this.nextRoute);
}
}
},
methods: {
login() {
firebase.auth().signInWithEmailAndPassword(this.email, this.password)
.catch(err => this.error = err)
},
loginGoogle() {
const provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider)
},
},
})
</script>
Errors
ERROR /src/views/Login.vue(62,32):
62:32 No overload matches this call.
Overload 1 of 2, '(location: RawLocation): Promise<Route>', gave the following error.
Argument of type 'unknown' is not assignable to parameter of type 'RawLocation'.
Type 'unknown' is not assignable to type 'Location'.
Overload 2 of 2, '(location: RawLocation, onComplete?: Function | undefined, onAbort?: ErrorHandler | undefined): void', gave the following error.
Argument of type 'unknown' is not assignable to parameter of type 'RawLocation'.
Type 'unknown' is not assignable to type 'Location'.
60 | user(auth) {
61 | if (auth) {
> 62 | this.$router.replace(this.nextRoute);
| ^
63 | }
64 | }
65 | },
ERROR in /src/views/Login.vue(68,59):
68:59 Property 'email' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, { nextRoute: unknown; user: any; }, Readonly<Record<never, any>>>'.
66 | methods: {
67 | login() {
> 68 | firebase.auth().signInWithEmailAndPassword(this.email, this.password)
| ^
69 | .catch(err => this.error = err)
70 | },
71 | loginGoogle() {
ERROR in /src/views/Login.vue(68,71):
68:71 Property 'password' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, { nextRoute: unknown; user: any; }, Readonly<Record<never, any>>>'.
66 | methods: {
67 | login() {
> 68 | firebase.auth().signInWithEmailAndPassword(this.email, this.password)
| ^
69 | .catch(err => this.error = err)
70 | },
71 | loginGoogle() {
ERROR in /src/views/Login.vue(69,32):
69:32 Property 'error' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, { nextRoute: unknown; user: any; }, Readonly<Record<never, any>>>'.
67 | login() {
68 | firebase.auth().signInWithEmailAndPassword(this.email, this.password)
> 69 | .catch(err => this.error = err)
| ^
70 | },
71 | loginGoogle() {
72 | const provider = new firebase.auth.GoogleAuthProvider();
Aucun commentaire:
Enregistrer un commentaire