xon52/x5-gmaps

Computed markers throw error

Closed this issue ยท 8 comments

When the computed is changed second time when markers are rendered already, some errors are thrown. I guess it's because the old markers are not destroyed but don't have the values anymore (?).

<gmaps-marker
    v-for="(marker, markerIndex) in markers"
    :key="'marker-' + markerIndex"
    :position="marker.position"
    @click="showMarker(marker)"
    @closed="markerDetail.show = false"
/>

[Vue warn]: Error in callback for watcher "_options": "TypeError: can't access property "lat", t is undefined"

xon52 commented

@thefoxie thanks for that. I couldn't find any relevant t.lat in the compiled code except for outside of the Popup component (not the Marker). I pushed an update that may fix it if that is the problem, so please update and see if it's fixed. If not, any more information would help a lot.

@xon52 wow that was fast. Unfortunatelly, the issue persists. I know, it's the callback/gmaps script. I suspect it has something to do with lifecycle since it's 3rd party DOM manipulation. I can make a codepen. I wanted to take a look at it as well, I just haven't had time yet.

xon52 commented

Yeah, it will be the lifecycle. I have come across it before but it wasn't consistent enough for me to really get into it. If it's Vue-side it may just need a key which I will try, but if you can make a small pen that would help.

I just checked the commit and you updated popup.vue not marker.vue. Also, I think some form of cdn would be handy for the codepen. ๐Ÿ˜ƒ

xon52 commented

@thefoxie yeah that's what I said, I found a potential issue that may cause that in Popup not Marker.
Here's a CDN for you : https://unpkg.com/x5-gmaps@0.3.24/dist/index.js

@xon52 haha yeah thank you just figured out it's there as it's on NPM. Sorry, I might be exhausted a little bit ๐Ÿ˜„

Here it is: https://codepen.io/thefoxie/pen/zYqezXq
Change computed with the button below.

xon52 commented

@thefoxie fixed in 0.3.25. Thanks for reporting it and doing the codepen ๐Ÿ‘