vue-leaflet/Vue2Leaflet

Conditional content in popup via Named Slot doesn't show on the second click

kohenkatz opened this issue · 2 comments

Description

When filling in popup content using Named Slots and the clot contents are conditionally present (using v-if), the popup content only shows the first time it is clicked. Subsequent clicks show an empty popup.

(Note: The v-if on a visible property is needed to ensure that the popup does not run its mounted function until it is visible. For this example, the mounted function just gets the current time, but in a real application this would be making an API call to the server.)

Live Demo

http://jsfiddle.net/kohenkatz/yxf84sek/31/

Steps to Reproduce

  1. Create an instance of l-popup that contains a named <slot>. Bind a visible property to the slot and use that property in v-if so that the internal content is rendered only when the slot is visible.
  2. Click the marker to show the popup
  3. Click the marker again (or click anywhere else on the page) to hide the popup
  4. Click the marker again to show the popup again

Expected Results

The popup shows up a second time.

Actual Results

An empty popup bubble appears.

I know that the visible property is being set correctly and is not the issue here, since the console.log when it is changing shows up as expected.

Refreshing the page makes it work again one more time.

Browsers Affected

  • Chrome
  • Firefox
  • Edge
  • Safari 9
  • Safari 8
  • IE 11

Versions

  • Leaflet: v1.7.1
  • Vue: v2.6.12
  • Vue2Leaflet: v2.7.0
mikeu commented

Hi @kohenkatz , thank you for reporting this issue, and the very helpful demo of it. Sorry for the delayed response, have you made any progress resolving the problem? It seems possible to me that it is in fact something to do with Vue itself and combining v-if with slots, along the lines of vuejs/vue#11084, but I'm not sure yet.

Interestingly, I found while playing around with your demo that if you add an alternative element with a v-else, then you basically get the behaviour you are looking for, other than a brief display of an empty popup as it closes:

https://jsfiddle.net/munderwood/0qstyad1/1/

If you still haven't resolved this, and still believe it to be a problem with Vue2Leaflet, then I'm happy to help resolve it!

Yes, it does look like it could be related to vuejs/vue#11084.

For my use-case, I figured out that I could replace the v-if at the top level with a design that includes a loading indicator and a few v-if directives further down in the code.