Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
[6.3][6.4] [Vue3] Controls not updating the component if a wrapper is present
See original GitHub issueDescribe the bug After updating to 6.3 I noticed all my story controls stopped working. I came from 6.2. If a wrapper is present around the Vue component (and all my stories have a layout wrapping around them), the controls are no longer updating the component. If I refresh the page the state does update if the control’s URL parameters are present.
To Reproduce
- Clone / download: https://github.com/johanvanhelden/sb-controls-not-updating-component
- Run:
npm run storybook - Click the
Footer Working - Without wrapperand check that the alignment control is working. - Click the
Footer Broken - With wrapperand see the alignment control is not working. - Refresh the page of the broken component after changing the alignment and notice it does update.
System
Environment Info:
System:
OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
Binaries:
Node: 14.13.0 - ~/.nvm/versions/node/v14.13.0/bin/node
Yarn: 2.4.2 - /usr/bin/yarn
npm: 6.14.8 - ~/.nvm/versions/node/v14.13.0/bin/npm
Browsers:
Chrome: 91.0.4472.77
npmPackages:
@storybook/addon-actions: ^6.4.0-alpha.4 => 6.4.0-alpha.4
@storybook/addon-docs: ^6.4.0-alpha.4 => 6.4.0-alpha.4
@storybook/addon-essentials: ^6.4.0-alpha.4 => 6.4.0-alpha.4
@storybook/addon-links: ^6.4.0-alpha.4 => 6.4.0-alpha.4
@storybook/vue3: ^6.4.0-alpha.4 => 6.4.0-alpha.4
Issue Analytics
- State:
- Created 2 years ago
- Reactions:2
- Comments:11 (3 by maintainers)
Top Results From Across the Web
Why Your Vue Component Isn't Updating (and how to fix it)
1. Check that variables are reactive · 2. Make sure to update Arrays and Objects correctly (only in Vue 2) · 3. Use...
Read more >Vue 3 component not updating after call from vue-router
Found the answer to my problem! I had to use watchEffect on the loadValue method in order to recall the data from the...
Read more >Build Advanced Components in Vue 3 using $attrs
If you have used VueJs in the past (version 2), there is a significant chance that you have already used $attrs before. The...
Read more >Storybook controls dont react to v-model changes #14259
Changing state in the controls updates the component as expected ... if desired, there could be wrappers that work with each framework.
Read more >Wrapper | Vue Test Utils
Returns component name if Wrapper contains a Vue instance, or the tag name of Wrapper DOM node if Wrapper does not contain a...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Ta-da!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.0-alpha.6 containing PR #15409 that references this issue. Upgrade today to the
@nextNPM tag to try it out!Closing this issue. Please re-open if you think there’s still more to do.
@johanvanhelden I’m going to revert the PR and release today