Sorry, this question is going to be a bit vague, mostly because I honestly don't know where to go next. I followed this tutorial here (https://auth0.com/blog/how-to-make-secure-http-requests-with-vue-and-express/) and everything worked up to the nearly last entry. Now, I'm getting these errors:
ERROR in /home/aron/code/cx/client/src/views/EventSingle.vue(44,10):
44:10 Property 'getEventData' does not exist on type '{ name: string; data(): { event: {}; }; created(): void; methods: { getEventData(): Promise<void>; }; }'.
42 | },
43 | created() {
> 44 | this.getEventData(); // NEW - call getEventData() when the instance is created
| ^
45 | },
46 | methods: {
47 | async getEventData() {
ERROR in /home/aron/code/cx/client/src/views/EventSingle.vue(49,36):
49:36 Property '$auth' does not exist on type '{ getEventData(): Promise<void>; }'.
47 | async getEventData() {
48 | // Get the access token from the auth wrapper
> 49 | const accessToken = await this.$auth.getTokenSilently()
| ^
50 |
51 | // Use the eventService to call the getEventSingle method
52 | EventService.getEventSingle(this.$route.params.id, accessToken)
ERROR in /home/aron/code/cx/client/src/views/EventSingle.vue(52,38):
52:38 Property '$route' does not exist on type '{ getEventData(): Promise<void>; }'.
50 |
51 | // Use the eventService to call the getEventSingle method
> 52 | EventService.getEventSingle(this.$route.params.id, accessToken)
| ^
53 | .then(
54 | (event => {
55 | this.$set(this, "event", event);
ERROR in /home/aron/code/cx/client/src/views/EventSingle.vue(55,14):
55:14 Property '$set' does not exist on type '{ getEventData(): Promise<void>; }'.
53 | .then(
54 | (event => {
> 55 | this.$set(this, "event", event);
| ^
56 | }).bind(this)
57 | );
58 | }
Here's my tsconfig.json:
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"skipLibCheck": true,
"esModuleInterop": true,
"noImplicitAny": false,
"allowSyntheticDefaultImports": true,
"allowJs": true,
"sourceMap": true,
"baseUrl": ".",
"resolveJsonModule": true,
"types": [
"webpack-env",
"jest"
],
"typeRoots": ["./@types", "./node_modules/@types"],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost","es2015", "es2016", "es2018.promise"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
I'm not incredibly familiar with TypeScript, Javascript, etc, and I've been poking around at various ways to solve this - https://blog.risingstack.com/auth0-vue-typescript-quickstart-docs/ and https://auth0.com/docs/quickstart/spa/vuejs/01-login.
My GUESS is that the Vue object prototype is not being extended with the Auth0 plug-in, and it's something about the way the frameworks have changed since this tutorial was written. Any suggestions? Happy to paste in more info if it helps.
Thanks!
CodePudding user response:
To enable type inference in the single file component, use Vue.extend()
on the component declaration:
// EventSingle.vue (Vue 2)
import Vue from 'vue';