As a newcomer to Vue.js, I am currently utilizing it with Typescript on a Nuxt.js (v2.15.8) application.
The code snippet provided below is functioning correctly:
export default Vue.extend({
name: 'MyComponent',
computed: {
isLatitudeValid() {
return this.form.latitude ? this.form.latitude >= -90 && this.form.latitude <= 90 : null;
}
},
data: () => ({
form: {
address: null,
city: null,
postalCode: null,
latitude: null,
longitude: null
}
})
});
However, I encountered a Typescript error when attempting to introduce props, which prevented me from accessing this.form.latitude within the isLatitudeValid function.
export default Vue.extend({
name: 'MyComponent',
props: { // Added this recently
someProp: String
},
computed: {
isLatitudeValid() {
return this.form.latitude ? this.form.latitude >= -90 && this.form.latitude <= 90 : null;
// Error message: Property 'latitude' does not exist on type '(() => any) | ComputedOptions<any>'.
// Property 'latitude' does not exist on type '() => any'.Vetur(2339)
}
},
data: () => ({
form: {
address: null,
city: null,
postalCode: null,
latitude: null,
longitude: null
}
})
});
It appears that Visual Studio Code/Vetur/Typescript compiler is no longer able to recognize this properties when props are added.
Referring to this resource (in the "Avoiding naming collisions" section), I should be able to access properties defined in both props and data, as long as there are no naming conflicts.
I believe I am overlooking something: how can I resolve this issue?