Storybook: Properties not reactive in VueJS SFC

[jurgenbosch]

Describe the bug
When using a VueJS Single File Component in Storybook the Knobs and the component itself renders as expected but the changes in the Knobs are not reflected in the component.

To Reproduce
Steps to reproduce the behavior:

1. Use Storybook with Vue
2. Create a Single File Component
3. Add Propertie(s) to the component's template
4. Add the propertie(s) to the props object in the export default with a default value with text (or any other) function from the addon-knobs extension.
5. See the rendered component and select the knobs tab
6. Change the Knob(s)
7. Nothing changes in the rendered component

Expected behavior
See the component updated with the changes from the Knobs.

Code snippets
In the SFC;
<MyComponent :placeholder=placeholder />

export default { name: "MyComponentDefault", components: { MyComponent }, props: { placeholder: { default: text('Placeholder', 'This is my placeholder') }, } }

In the story;
export default { title: 'My Component', decorators: [withKnobs] };

export const Default = () => MyComponentDefault;

System:
Environment Info:

System:
OS: macOS 10.15.3
CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
Binaries:
Node: 13.6.0 - /usr/local/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.13.4 - /usr/local/bin/npm
Browsers:
Chrome: 80.0.3987.87
Safari: 13.0.5
npmPackages:
@storybook/addon-actions: ^5.3.3 => 5.3.3
@storybook/addon-docs: ^5.3.9 => 5.3.9
@storybook/addon-knobs: ^5.3.8 => 5.3.8
@storybook/addon-links: ^5.3.3 => 5.3.3
@storybook/addon-notes: ^5.3.8 => 5.3.8
@storybook/addon-storysource: ^5.3.12 => 5.3.12
@storybook/addons: ^5.3.3 => 5.3.3
@storybook/vue: ^5.3.3 => 5.3.3

[shilman]

@jurgenbosch pretty sure you need to define the knob INSIDE the story function or it won't work

[jurgenbosch]

@shilman If what you say is true, it will mean that SFC's won't work in combination with Knobs. Is that right?

[shilman]

@jurgenbosch SFCs work fine with knobs AFAIK. you just need to define your stories inside the story file, not inside the SFC (which is not what we recommend anyway)

[rdhainaut]

I prefer (and love) use SFC to define my story. It s a clean organization and because it s a separate MyStory.vue file, i have a great IDE experience to define story(ies).
I m facing the same issue. I cannot (or i don t have understood how to) use knobs addon and SFC vue story files.

@jurgenbosch What solution do you have adopted finally ? (if you have a workaround to use knobs and SFC, i would like to know)

[jurgenbosch]

@rdhainaut No so far I have not found a solution so working without SFC's.

[shilman]

cc @Aaron-Pool @elevatebart @pocka

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[cenfun]

same issue, Knobs render props well but NOT reactive:
import Demo from "./components/demo.vue";
stories.add("my title", () => (Demo));

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[rdhainaut]

If someone find a workaround, i m still interesting.
@shilman Do you think is it possible to trigger manually an event or something to simulate what knobs do ?

Definitively writes story "demo" code in a separate SFC file is so easy and confortable for visual testing a vue app.
My solution for the moment, it s to not use knobs and use simple inputs in the story sfc file to change story state.

[shilman]

@rdhainaut we're overhauling knobs in 6.0 https://github.com/storybookjs/storybook/pull/10834

[shilman]

Hi gang, We’ve just released addon-controls in 6.0-beta!

Controls are portable, auto-generated knobs that are intended to replace addon-knobs long term.

• Controls README
• Migration instructions

Please upgrade and try them out today. Thanks for your help and support getting this stable for release!

[shilman]

For anybody who is interested in Controls but don't know where to start, I've created a quick & dirty step-by-step walkthrough to go from a fresh CRA project to a working demo. Check it out:

=> Storybook Controls w/ CRA & TypeScript

There are also some "knobs to controls" migration docs in the Controls README:

=> How do I migrate from addon-knobs?

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!