Replies: 1 comment
-
As a workaround, I guess I can use the undocumented magical values that get created, for the template to use, sort of like this: const Story = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { Alert },
template: '<alert :alert="alert" :messages="messages" />',
}); And this hooks up I also tried the Edit const Story = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { Alert },
template: `<alert ${Object.keys(argTypes).map(p => `:${p}="${p}"`).join(' ')} />`, // Readibility ¯\_(ツ)_/¯
}); |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
I've read this explainer on how to include
args
in a story. The example stories you get when doingnpx storybook init
have it working as well. But now I want to useargs
in a real component we've built, and it won't work. Here's my example:Observations:
console.log
just proves thatargs
is being populated with controls values properly.:messages
, it works fine.args.messages
in there like above, it complainsargs is undefined
. But theconsole.log
proves that it bloody well isn't! Maybe a differentargs
isundefined
, but that doesn't really tell me how to fix it.args?.messages
sure enough the error is gone, but the component always recievesundefined
, so it doesn't really fix anything.Something magical probably still needs to happen, to hook up
args
to the component props. But I fail to see how this is done. Again, the example stories from the initial installation look like this as well, except for theTemplate.bind({})
which doesn't help to add.I've also tried to leave out
:messages
and hope that something will hook upargs
by, I dunno, sheer willpower? But nope, in that case the component doesn't recieve anything other than whatever is hardcoded (i.e. all props are recieved asundefined
).So what on good mother Earth could I be missing please?
(and also, this feels like crucial information that ought to be in the documentation mentioned)
Edit
I just found Dealing with complex values where a
setup
function is added. It looks like it's "sending" the args to the component? So let's try to add it:Nope. It's still complaining about undefined args. And again if I hardcode that one prop, all other props are still recieved as
undefined
.Edit 2
I remember from writing unittests that I had to pass props via the
propsData
property, which I tried to add here as well:But then not only does it still not work (in exactly the same manner), but I get an additional warning:
Beta Was this translation helpful? Give feedback.
All reactions