Slot contents of v-pop are visible behind map

[nickforddev]

Description

When using slots in v-popup component, the popup content is visible behind the map. This becomes apparent when the map is zoomed out, or when tiles are loading.

Live Demo

https://jsfiddle.net/gu2unt12/1/

Steps to Reproduce

Use slot in v-popup component

Versions

• Leaflet: v1.2.0
• Vue: v2.5.2
• Vue2Leaflet: v0.0.57

[kino90]

Hello. I'm having this issue too.
What about using the slot instead of the "content" prop to have a dynamic popup? Will this be possible?

[nickforddev]

I did come up with a temporary css fix for this. Note that this is scss:

.vue2leaflet-map {
  width: 100%;
  height: 100vh;

  // this is working for me because my marker components only show 
  // text until they are opened, you may need to try other ways of hiding
  // the elements if you have more than just text...
  & > div {
    color: transparent;
  }
}

[kino90]

@nickforddesign
To avoid the workaround you can use the "content" prop:
<v-popup :content="item.popup" :options="options"></v-popup>

Look at this: https://jsfiddle.net/gu2unt12/2/

[nickforddev]

@kino90 But this doesn't allow you to easily bind vue components to the popups. For instance, if I want to have interactive components inside the popup, slot is the way to go.

[kino90]

Indeed, I was asking for the same behavior 👍

[jrast]

The jsfiddle in the issue seems to have invalid html (opens with v-popup and closes with v-tooltip), however, the behaviour is the same with valid markup:
https://jsfiddle.net/vbrye2af/

[KoRiGaN]

@nickforddesign @kino90 @jrast, this should now be fixed in v0.0.58.

Let me know if it works for you guys.

Micka

[nickforddev]

@KoRiGaN I can confirm that this looks to be fixed now, thank you!

[KoRiGaN]

@nickforddesign good to hear that it solved.

I'm closing this issue for now.