Vue.compile(template) - Direct siblings from same component on template change have wrong reference in life-cycle hooks
shadowtsw opened this issue · comments
Version
2.7.10
Reproduction link
Steps to reproduce
We use Vue.compile() to render dynamic content at runtime. All components make use of life-cycle hooks e.g. to [provide] attributes to deeply nested slot components.
Create two template strings with wrapper (e.g. div id=xy), inside two or three vue-components from same vue file. In the second template, remove the first component. At runtime, use Vue.compile to reder content, switch the templates and e.g. log attributes in life-cycle hooks.
What is expected?
The log has to show the attributes from first component (which one has been removed).
What is actually happening?
The log shows the attributes from last component of all siblings.
Watchers on attributes, trigger and show the old value (attr from last sibling) and new value (current and correct attribute from related component).
Tried many things, but nothing works. My colleague has a small reproducable example which shows the problem.
Could you explain further what you mean by this
"Create two template strings with wrapper (e.g. div id=xy), inside two or three vue-components from same vue file. In the second template, remove the first component. At runtime, use Vue.compile to reder content, switch the templates and e.g. log attributes in life-cycle hooks."
Not sure how this is shown in the given github repo - could you please provide a more accurate code recreation?
Sure, my colleague has updated the example, also with explanation. Hopefully, the problem becomes understandable.
In addition, if same type siblings are seperated by another type of component (try out to insert a <br> between), everything works as expected.
Solved....
It seems the template compiler also needs the "key" property on custom components to refer to the correct instance if template changes (add or remove components).