Dynamic component not rendering slot tree

Question

Dynamic component not rendering slot tree

stasson opened this issue 8 years ago · 2 comments

stasson commented 8 years ago

Version

2.5.2

Reproduction link

https://stasson.github.io/vue-mdc-adapter

Steps to reproduce

1- Open https://stasson.github.io/vue-mdc-adapter with chrome or edge, full width,
2- click the toolbar menu icon, the persistent drawer open/close and renders properly
3- Decrease the width of the window so that you hit the mobile media query (max-width: 840px)
4- the drawer is now a temporary drawer ( fixed ) but content is not rendered

What is expected?

the drawer content should be rendered

What is actually happening?

once dynamic update of the drawer component, the content (slot) is not rendered

a sumary on the issue on the forum:
https://forum.vuejs.org/t/dynamic-component-not-rendering-slot-tree/20215

to reproduce in dev mode:
clone the repo https://github.com/stasson/vue-mdc-adapter then npm install ; npm run dev

I already tried to checked that the lyfe-cycle seem to be properly called and that $slot.default has the proper VNodes. Am I facing a virtual dom caching issue ?

Answer 1 · 2017-10-23T19:24:43.000Z

Please provide a repro and not a whole project. You can use this fiddle to set it out: http://jsfiddle.net/posva/wsr78d2w/

Answer 2 · 2017-10-24T07:44:24.000Z

@posva For now I was not able to reproduce with fidlle or codepen. it may be relelated to the fact I'm using webpack with vue-loader/template compiler !? I guess I'll try some more ...

Question though.
here I captured the states of the vm instances :

first load

{created: "mdc-drawer12", children: Array(0), slots: Array(3)}
{created: "mdc-temporary-drawer13", children: Array(0), slots: Array(3)}
{created: "mdc-drawer-list15", children: Array(0), slots: Array(23)}
{mounted: "mdc-drawer-list15", children: Array(23), slots: Array(23)}
{mounted: "mdc-temporary-drawer13", children: Array(2), slots: Array(3)}
{mounted: "mdc-drawer12", children: Array(1), slots: Array(3)}
{created: "mdc-persistent-drawer65", children: Array(0), slots: Array(3)}
{created: "mdc-drawer-list67", children: Array(0), slots: Array(23)}

Then I hit the media query breakpoint and the drawer switch to persistent component. drawer is rendered but not the it's default slots.

{beforeDestroy: "mdc-temporary-drawer13", children: Array(2), slots: Array(3)}
{beforeDestroy: "mdc-drawer-list15", children: Array(23), slots: Array(23)}
{destroyed: "mdc-drawer-list15", children: Array(23), slots: Array(23)}
{destroyed: "mdc-temporary-drawer13", children: Array(2), slots: Array(3)}
{mounted: "mdc-drawer-list67", children: Array(0), slots: Array(23)}
{mounted: "mdc-persistent-drawer65", children: Array(2), slots: Array(3)}
{created: "mdc-temporary-drawer68", children: Array(0), slots: Array(3)}
{created: "mdc-drawer-list70", children: Array(0), slots: Array(23)}

Any idea why mdc-drawer-list67 has 0 children while on first load, mdc-drawer-list15 has the 23 children. is that something we'd expect ? ( I started looking into the vue js code and I must say that for now my understanding of the vdom rendering details is pretty low ...)