search

inocan-group / vue3-google-map

A set of composable components for easy use of Google Maps in your Vue 3 projects.
https://vue3-google-map.com
MIT License
285 stars 56 forks source link

v-show on custom-control does not work #172

Closed cadilhac closed 1 year ago

cadilhac commented 1 year ago

I was trying to show/hide a custom control like this:

<custom-control v-show="canShow">
</custom-control>

This does not work. It works only if v-show is applied to a child node of custom-control. Is it intended?

HusamElbashir commented 1 year ago

You'd have to use v-if instead

cadilhac commented 1 year ago

You're right. v-if works. Can you explain why v-show doesn't?

HusamElbashir commented 1 year ago

Your v-show is conflicting with a v-show we already have on the root div of the component.

v-if gets around that because it triggers our logic to create/remove the custom control from the map when the component is created/destroyed.

I'll push a fix for this but in general most of our components will require v-if because vue isn't really rendering anything, just instantiating and removing map objects (the only exception being custom controls, custom markers and info windows). v-show works by setting display: none via inline styles on DOM elements which vue controls.