Function wiring breaks for components that show/hide slot content using v-if

Vue.js version

2.0.0-rc.3

Reproduction Link

http://codepen.io/analog-nico/pen/dXBRBG

Steps to reproduce

1. Click the link “Open popup using v-if”
2. A badly designed popup opens
3. Click the “Close” link
4. For this first time the popup closes successfully
5. Click the link “Open popup using v-if” again
6. The popup opens again
7. Click the “Close” link

What is Expected?

• Again, the popup closes successfully

What is actually happening?

• Vue fails to call an internal function that got missing.
• The closePopupUsingVIf function attached to the “Close” link’s click event never gets called.
• The popup does not close.

For reference the codepen contains the exact same implementation of the popup with the only difference that it uses v-show instead of v-if to show/hide the popup. v-show works perfectly.

[LinusBorg]

Using $refs for this won’t work, as explained by @fnlctrl due to issue #3455, but I would say this is not a recommended pattern anyway.

I would rather: a) pass a is-shown prop to the component, (https://jsfiddle.net/Linusborg/rwa5cfdm/) or b) use v-if on the component itself (https://jsfiddle.net/Linusborg/rwa5cfdm/1/)

if the popup component will have its own controls, i.e. a close button, $emit() an event from it and let the parent listen with @event="handler" on the component - then the parent can change the state value.

This has several advantages:

• the parent knows about weither or not the popup is shown
• We don’t need to use tight coupling to the child components via $ref in you JS code.
• the parent stays in control of when to actually show and hide the popup.

[analog-nico]

@prog-rajkamal That is a valid point which @fnlctrl also mentioned in his first response. However, the bug still occurs if I move v-if to a child div. See my updated codepen.