Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

prop of component, in conditionally rendered slot, stops being reactive #7975

Closed
honeroku opened this issue Apr 6, 2018 · 3 comments
Closed

prop of component, in conditionally rendered slot, stops being reactive #7975

honeroku opened this issue Apr 6, 2018 · 3 comments
Labels
bug has PR has workaround regression

Comments

@honeroku
Copy link

honeroku commented Apr 6, 2018

Version

2.5.14+

Reproduction link

https://jsfiddle.net/cLdbL2t2/22/

Steps to reproduce

Clicking "update message" button adds dots after message.
Once "alter" button is clicked, the message is no longer updated.

What is expected?

Updating message continues working even after slot is altered.

What is actually happening?

Prop value stops being reactive, without error nor warning.

This behavior takes place after v2.5.14 including v2.5.17-beta.0.
Any version 2.5.13 and lower works as expected.

Unit test can be found in my github https://github.com/honeroku/vue-slot-investigate

I am understanding this is edge case and refactoring structure to avoid placing identical slot in conditional positions resolves my problem.
However, this behavior was not occurring in older versions and suddenly changed without error or warning,
so I am considering this is a bug and reporting to let you know.
@posva posva added the bug label Apr 6, 2018
@ustbhuangyi
Copy link

I have tried to find the difference between v2.5.13 and v2.5.14, finally find these commits 956756b may cause this bug.

@emanuelmutschlechner
Copy link

emanuelmutschlechner commented Apr 16, 2018 •
edited

I think the problem here is that you have the same slot twice in your template. I modified your jsfiddle to show that conditional rendering of slots works as expected.

https://jsfiddle.net/5kcdcpr6/2/
Note: only the last slot is working

Version 2.5.13 works as described.
https://jsfiddle.net/5kcdcpr6/4/

@sodatea sodatea mentioned this issue Jun 21, 2018
Closed
@sodatea
Copy link
Member

sodatea commented Jun 21, 2018

As a workaround, you can attach the slot attribute to a template element instead of div.

sodatea added a commit to sodatea/vue that referenced this issue Jun 28, 2018
@sodatea
fix(slot): slots should be deep cloned, fix vuejs#7975
8c54457
@sodatea sodatea added the has PR label Jun 28, 2018
f2009 pushed a commit to f2009/vue that referenced this issue Jan 25, 2019
@yyx990803
fix(core): avoid mutating original children when cloning vnode
8c907d4 
The on-demand clone strategy introduced in 956756b mutates the owner
array of the cloned vnode. This causes the newly cloned vnode to be
destroyed when the parent node is destroyed. This is fixed by cloning
the children array when cloning a vnode.

fix vuejs#7975
aJean pushed a commit to aJean/vue that referenced this issue Aug 19, 2020
@yyx990803 @aJean
fix(core): avoid mutating original children when cloning vnode
2c1f387 
The on-demand clone strategy introduced in 956756b mutates the owner
array of the cloned vnode. This causes the newly cloned vnode to be
destroyed when the parent node is destroyed. This is fixed by cloning
the children array when cloning a vnode.

fix vuejs#7975
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug has PR has workaround regression
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@posva @honeroku @sodatea @ustbhuangyi @emanuelmutschlechner