Currently experimenting with vue js 3 and typescript in the composition API while utilizing firebase for authentication
<template>
<input placeholder="Password" @input="this.password"/>
</template>
<script lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
export default {
setup() {
const router = useRouter();
const email = ref("");
const password = ref("");
const gender = ref("Male");
const registerUser = () => {
createUserWithEmailAndPassword(getAuth(), this.email, this.password)
.then((data) => {
router.push("/");
})
.catch((error) => {
console.log(error);
});
}
return {
email,
password,
gender,
registerUser,
};
},
Encountering errors related to both email and password :
Property 'email' does not exist on type '{ setup(): { email: Ref; password: Ref; gender: Ref; registerUser: () => void; }; methods: {}; }'.
Error displayed in the browser during feature testing:
TypeError: Cannot read properties of undefined (reading 'email')