I am facing an issue where I am unable to access the this.somethingHere variables inside methods using axios in combination with vuejs3 and TypeScript.
Template code (not required):
<template>
<div>
<form>
<label for="email"> E-mail </label>
<input
type="email"
placeholder=""
name="email"
id="email"
v-model="email"
/>
<br /><br />
<label for="password"> Senha </label>
<input
type="password"
placeholder=""
v-model="password"
name="password"
id="password"
/>
<br /><br />
<button @click="doLogin" type="button">Enviar</button>
</form>
</div>
</template>
IMPORTANT: My vueJS code:
<script lang="ts">
import { axios } from "../services/config";
interface Login {
email: string;
password: string;
}
export default {
data(): { email: string; password: string; data: string } {
return {
email: "",
password: "",
data: "",
};
},
methods: {
async doLogin(): Promise<void> {
let userData: Login = {
email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e2a36373f393170283f323b302a3b1e283f323b302a3b703d3133">[email protected]</a>",
password: "myPassword",
};
try {
const response: string = await axios.post("/login", userData);
this.data = response;
} catch (error) {
this.data = "Error: " + error;
}
},
},
};
</script>
Upon trying to build (save), I encountered the following error:
ERROR in src/views/Login.vue:52:14
TS2339: Property 'data' does not exist on type '{ doLogin(): Promise<void>; }'.
50 | this.data = response;
51 | } catch (error) {
> 52 | this.data = "Error: " + error;
| ^^^^
53 | }
54 | },
55 | },
If I disable TypeScript, everything works fine. However, sometimes it works but upon saving again, I encounter an error.