-
Notifications
You must be signed in to change notification settings - Fork 49
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bug: impossible to remove markers with v-if or v-for #301
Comments
@basuneko thank you for reporting it I'll take a look at it as soon as possible but, if you want you can send a PR, your contribution is welcome here 😉 |
Branch issue-301-Bug_impossible_to_remove_markers_with_v-if_or_v-for created! |
Again, thank you for reporting this issue. Thanks to this problem I found a way to have a dev server using the same examples that I used before to make e2e tests, and also I found other minor issues and improvements while I was working on this bug. On the other hand, first, the issue was not caused by the proxy object, it was caused because I omitted to exclude only Then, on the marker component you have a prop called <!-- In your example you should use a visible prop like the example below -->
<div class="map">
<GmvMap :center="{ lat: 10, lng: 10 }" :zoom="7" map-type-id="terrain">
<GmvMarker v-if="showMarker" :position="{ lat: 10, lng: 10 }" :visible="markersVisible" />
<GmvMarker v-for="(marker, index) in markersList" :key="index" :position="marker" :visible="markersVisible" />
</GmvMap>
</div> Finally, I added two new e2e tests to guarantee the correct behaviour of the You can test this new version 1.0.2, let me know if you find something new. Regards. |
Sorry, after finding the other issue I miss the other part of this bug, the |
@diegoazh wonderful, thanks 🙌 I was just setting up gmap-vue locally to start working on a PR |
After investigating js Proxies, I found this post on the Vue repository. After debugging the |
🎉 This issue has been resolved in version 1.0.3 🎉 The release is available on: Your semantic-release bot 📦🚀 |
@basuneko new version landed. |
Describe the bug
Hi, I'm working a project where the user can select things and corresponding markers should be added/removed from the map.
I have code similar to this:
I can add markers to the map with no problem. But when I try to remove them (e.g. by setting
showMarker
to false, or by changing thecurrentlyVisibleMarkers
array), the markers remain on the map.💡 Updated:
After a lot of monkey-patchning I believe I've gotten to the bottom of it: google maps api doesn't work well with proxies.
The above code is executed correctly. However, the
markerInstance.value
object is not the actual google maps api' marker - it's a reactivity proxy. I'm not sure if the issue is in the maps api or in vue reactivity system but it just doesn't do what it's supposed to.Fix
The solution seems to be to unproxify the object:
And this seems to work as expected.
To reproduce
Code sandbox
github
(branch: gmap-vue-bug-repro)
Steps to reproduce the behavior:
Expected behavior
The markers should appear and then get removed
Current behavior
The markers appear but never get removed from the map
Screenshots
Desktop (please complete the following information)
Smartphone (please complete the following information)
Additional context
Versions
Package manager
NPM
Plugin version
@gmap-vue/v3@1.0.1
The text was updated successfully, but these errors were encountered: