using a component containing a top level v-if in parent with $refs

[TomKaltz]

Version

2.4.4

Reproduction link

https://jsfiddle.net/TomKaltz/aao0waem/

Steps to reproduce

Define a component where the top level element has a v-if. Declare that component in the parent template with a ref.

What is expected?

The ref should be available even if the component top-level v-if is false

What is actually happening?

Even if the v-if is false, the component is still accessible via $refs on first load. When you toggle the component v-if from false to true to false the parent ref becomes undefined. The component beforeDestroy and destroyed event also does not fire.

[TomKaltz]

This is related to #6632. Is this a bug or just some unintended feature that the ref is available on first render? This behavior seems to have only come up in the recent release.

[TomKaltz]

The workaround of using a top level buffer div seems super hacky but does solve the problem.

[posva]

To me this is working as expected. Also, you need a root element, so putting v-if in the root element of your component is probably giving you a warning or error on the console. However you can use a v-show instead so there's always a root element for the component

[TomKaltz]

Seems a little quirky though. Why is the ref there when first render v-if=false?

[sgehrman]

I'm having the same problem

[TomKaltz]

Someone submitted pull request #6718 a few days ago. Hopefully it has a satisfactory fix for the issue. Looking forward to it!