Having trouble passing a default value to my Leaflet map child component before fetching the desired data from an API endpoint. I tried using country coordinates like latitude and longitude, but it's not working as expected.
This is how I attempted to pass the values:
<template>
<div class="home">
<LeafletMap
:latitude="countryStats.countryInfo.lat || 0"
:longitude="countryStats.countryInfo.long || 0"
/>
</div>
</template>
In another attempt:
<template>
<div class="home">
<LeafletMap
:latitude="countryStats.countryInfo.lat ? countryStats.countryInfo.lat : 0"
:longitude="countryStats.countryInfo.long ? countryStats.countryInfo.long : 0"
/>
</div>
</template>
However, neither of these methods seem to be working for me.
When trying this out, I encounter the following error:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'lat' of undefined"
found in
---> at src/components/home/Home.vue
The displayed error refers to my child component, which looks like this:
<template>
<div class="map">
<h1>World Map</h1>
<div id="mapContainer">
<l-map
style="height: 80%; width: 100%"
:zoom="zoom"
:center="center"
@update:zoom="zoomUpdated"
@update:center="centerUpdated"
@update:bounds="boundsUpdated"
>
<l-tile-layer :url="url"></l-tile-layer>
</l-map>
</div>
</div>
</template>
<script>
import "leaflet/dist/leaflet.css";
import { LMap, LTileLayer } from "vue2-leaflet";
export default {
name: "LeafletMap",
components: {
LMap,
LTileLayer
},
props: {
latitude: {
type: Number,
default: 0
},
longitude: {
type: Number,
default: 0
}
},
data() {
return {
url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
zoom: 4,
center: [this.latitude, this.longitude],
bounds: null
};
},
methods: {
zoomUpdated(zoom) {
this.zoom = zoom;
},
centerUpdated(center) {
this.center = center;
},
boundsUpdated(bounds) {
this.bounds = bounds;
}
}
};
</script>
<style src="./LeafletMap.css" scoped />
I am now wondering if providing default values for the props latitude and longitude in my child component is necessary or will it lead to conflicts?
If you have any suggestions or solutions, I would greatly appreciate them.