I've recently integrated TypeScript into my Vue project, and now I'm encountering an error every time I try to access a value in props or data:
37:46 Property 'activity' does not exist on type '{ props: { activity: { type: ObjectConstructor; required: boolean; }; }; methods: { formatDistance: (distance: number, setting_unit: string) => string; }; mounted: () => void; }'.
35 | },
36 | mounted: function () {
> 37 | var activitymap = L.map('map' + this.activity['activity']['id']).setView([51.505, -0.09], 13)
| ^
These are my props:
props: {
activity: {
type: Object,
required: true
}
},
And here's the method where it's being used:
mounted: function () {
var activitymap = L.map('map' + this.activity['activity']['id']).setView([51.505, -0.09], 13)
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: '<a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: process.env.VUE_APP_MAPBOX_KEY
}).addTo(activitymap)
var gpxGroup = new L.FeatureGroup();
activitymap.addLayer(gpxGroup);
omnivore.gpx(this.activity['activity']['activity_log_url']).addTo(gpxGroup).on('ready',
function () {
activitymap.fitBounds(gpxGroup.getBounds());
}
)
}
Do you have any insights on what might be causing this issue?