This is a really strange error I am getting when adding Leaflet marker(s) to my Vue.js App.
Below is the code I am using:
<LMarker
v-for="listing in listings"
:latlng="[listing.lat, listing.lon]"
>
<ChildVue />
</LMarker>
When I remove ChildVue, the code works perfectly.
When I add back in ChildVue, I get the below:
leaflet-src.js:1582 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'lat')
It’s odd because my ChildVue looks like this currently, with no calls to lat
:
<template>
<LPopup>
<p>Hello world!</p>
</LPopup>
</template>
<script>
import { LPopup } from 'vue3-leaflet';
import 'leaflet/dist/leaflet.css';
export default {
components: {
LPopup
},
};
</script>
Why does adding this file lead to this error?
Also, when I put the code of ChildVue.vue into my parent, the code works perfectly fine…