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.

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

Nested component's v-model doesn't trigger its updated lifecycle method when a parent dynamic component is updated by provide/inject #8337

Closed
linnea opened this issue Jun 11, 2018 · 1 comment

Comments

@linnea
Copy link

linnea commented Jun 11, 2018

Version

2.5.16

Reproduction link

https://jsfiddle.net/linnea/zmkt7ajy/15/

Steps to reproduce

  1. Click on the working checkbox. The v-model value updates and the "updated" lifecycle event fires a console log.
  2. Click on the "busted" checkbox, which is the same markup as the working checkbox, but wrapped within a div inside the DynamicWrap component.

Notice that the checkbox appears checked, but the v-model doesn't update and the "updated" lifecycle event of the checkbox never fires.

What is expected?

The second checkbox's v-model updates correctly

What is actually happening?

No updated lifecycle event fires, the v-model is not updated.


What's happening:
The DynamicWrapper is rerendered after mount when the UnwrappedCheckbox is created inside of its default slot. UnwrappedCheckbox uses provide/inject to update the DynamicWrap component to wrap it with a 'div' instead of a 'label' element. This clones the content inside, but once the Checkbox is nested a layer deeper, it stops behaving as expected.

Sorry for the monster title and complex replication, let me know if there's anything more I can do to clarify. For context, the purpose of this DynamicWrapper is to act as a type of "FormItem" component. It wraps any element placed inside of the component (In this case a Checkbox) with a label element unless it's something like a Checkbox or Radio. We have our own Checkbox and Radio, that we'd like to tell the FormItem to unwrap the label if a Checkbox is placed inside it.

I've also tested in the beta prerelease and the issue remains.

Possible related previous issues:
#6372
#6915

privatenumber pushed a commit to privatenumber/vue that referenced this issue Aug 9, 2018
privatenumber pushed a commit to privatenumber/vue that referenced this issue Aug 9, 2018
@linnea
Copy link
Author

linnea commented Jan 14, 2019

This was fixed in v2.5.18

@linnea linnea closed this as completed Jan 14, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant