When working with Vue.js and TypeScript, I usually use the following syntax:
@Component({
props: ['uploadUrl'],
})
export default class SelectionModal extends Vue {
let x = this.uploadUrl // This variable `uploadUrl` is NOT resolved in my IDE
}
However, I'm facing an issue where the uploadUrl is not getting resolved in my IDE (phpStorm) https://i.sstatic.net/FGb5Z.png
To resolve this problem, we can utilize vue-property-decorator and declare @Prop as explained here. The updated code would look like:
<template>
// ...
</template>
<script type="ts">
import {Component, Vue, Prop} from 'vue-property-decorator';
@Component
export default class SelectionModal extends Vue {
@Prop(String) readonly uploadUrl!: string
let x = this.uploadUrl // This variable `uploadUrl` is RESOLVED in my IDE
}
</script>
https://i.sstatic.net/dYT4O.png
Although this solution works, it may trigger the error:
SyntaxError: /myProject/src/path/to/MyComponent.vue: Unexpected token (33:25)
31 |
32 | export default class SelectionModal extends Vue {
> 33 | @Prop(String) readonly uploadUrl!: string
| ^
If anyone has suggestions on:
1- Resolving the uploadUrl in the first solution
2- OR fixing the Unexpected token issue?