Storybook controls dont react to v-model changes
See original GitHub issueDescribe the bug
- Changing state in the controls updates the component as expected
- Changing state in the component does not update the control state as expected
In vue you should not mutate props, and they propose you should implent a handler like so for v-model;
setup(props, { emit }) {
const model = computed({
get() {
return props.value
},
set(value) {
emit('input', value)
},
})
return {
model,
}
},
I’ve done this but storybook doesn’t react to the input event
To Reproduce Create a component that uses v-model and have storybook provide the value #10019 also shows this
Expected behavior Controls to react to the input
Screenshots
If applicable, add screenshots to help explain your problem.
Code snippets If applicable, add code samples to help explain your problem.
System
λ npx sb@next info
Environment Info:
System:
OS: Windows 10 10.0.18363
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Binaries:
Node: 10.16.3 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.4 - C:\Program Files\nodejs\yarn.CMD
npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 89.0.4389.90
Edge: Spartan (44.18362.449.0)
npmPackages:
@storybook/addon-essentials: ^6.1.14 => 6.1.14
@storybook/vue: ^6.1.14 => 6.1.14
Additional context Add any other context about the problem here.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:12
- Comments:8 (3 by maintainers)
Top Results From Across the Web
Controls - Storybook - JS.ORG
Auto-generate controls based on React/Vue/Angular/etc. components. Portable. Reuse your interactive stories in documentation, tests, and even in designs. Rich.
Read more >Using Storybook with Vue | Brock McElroy
Storybook's controls don't trigger the required events for v-model and the controlled value can't be updated by the component.
Read more >Vue.js - The Blue Book
Reactivity: Vue automatically tracks JavaScript state changes and efficiently ... To simplify two-way bindings, Vue provides a directive, v-model , which is ...
Read more >How to Set Up Storybook in VueJS - This Dot Labs
How to setup Storybook in VueJS In this post, we will take a look at how to ... Install Vue CLI if you...
Read more >Changing v-model attribute name in Vue components
Two way binding without using v-model : ... Don't forget to emit change event inside component or just use field input event instead:...
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
I feel this feature is essential, and should be added to the newer Controls.
Really hope this will be added