storybook
storybook copied to clipboard
storybookjs
Story canvas isn't updated on Controls prop change for Vue components
Describe the bug The story canvas isn't updated when I change prop values in the Controls tab. However, when refreshing the page the props are loaded correctly. Also, the docs page updates the component like it should.
To Reproduce https://github.com/thalesagapito/sb-repro
Hosted at https://621ee2f9beff3f003ac5bd73-nqmnedayec.chromatic.com/?path=/story/atoms-vpillbox--base
System Environment Info:
System: OS: macOS 11.5.2 CPU: (8) x64 Apple M1 Binaries: Node: 14.18.1 - /usr/local/bin/node Yarn: 3.2.0 - ~/.yarn/bin/yarn npm: 6.14.15 - /usr/local/bin/npm Browsers: Chrome: 98.0.4758.109 Firefox: 96.0.3 npmPackages: @storybook/addon-actions: ^6.5.0-alpha.45 => 6.5.0-alpha.45 @storybook/addon-docs: ^6.5.0-alpha.45 => 6.5.0-alpha.45 @storybook/addon-essentials: ^6.5.0-alpha.45 => 6.5.0-alpha.45 @storybook/addon-links: ^6.5.0-alpha.45 => 6.5.0-alpha.45 @storybook/builder-webpack5: ^6.5.0-alpha.45 => 6.5.0-alpha.45 @storybook/manager-webpack5: ^6.5.0-alpha.45 => 6.5.0-alpha.45 @storybook/vue: ^6.5.0-alpha.45 => 6.5.0-alpha.45
Additional context This was reported before at #11051
Confirming this bug for Vue 2.6 / SB 6.4, and for Vue 2.7 / SB 7.0-alpha37.
On the alpha branch, because docs now use the canvas mode renderer, the bug has propagated to the docs page too.
Not sure if this is going to help anybody, but I finally got this to work. The issue was that I was destructuring the args of the render function (and probably losing reactivity). I went from this:
export const Sandbox: Story = {
render: ({ ['default']: defaultSlot, ...args }) => ({
setup: () => ({ args, defaultSlot }),
to this:
export const Sandbox: Story = {
render: args => ({
setup: () => ({ args, defaultSlot: args.default }),
And now it works fine.
