question-mark
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.

Storybook controls dont react to v-model changes

See original GitHub issue

Describe 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. image

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:open
  • Created 3 years ago
  • Reactions:12
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

7reactions
dudedigitalcommented, Mar 31, 2021

I feel this feature is essential, and should be added to the newer Controls.

6reactions
TrayHardcommented, Jun 28, 2021

Really hope this will be added

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found