Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to pass props to component's story?

I wanted to add some stories for vue-select component using Storybook, but I'm struggling with more complicated cases, which involve passing props or methods.

When I pass props inside the template it works:

storiesOf('VSelect', module)
.add('with labeled custom options', () => ({
        components: {VSelect},
        template:   `<v-select :options='[{value: "CA", label: "Canada"}, {value: "UK", label: "United Kingdom"}]' />`
    }))

I find it not very readable, so I wanted to pass them separately as props or data:

.add('with labeled custom options as props', () => ({
        components: {VSelect},
        props:      {options: [{value: "CA", label: "Canada"}, {value: "UK", label: "United Kingdom"}]},
        data:       {options: [{value: "CA", label: "Canada"}, {value: "UK", label: "United Kingdom"}]},
        template:   `<v-select />`
    }))

but neither data, nor props are not recognized by storybook - they seem to be ignored.

like image 571
van_folmert Avatar asked Nov 02 '17 14:11

van_folmert


People also ask

How do you pass a prop?

To pass props, add them to the JSX, just like you would with HTML attributes. To read props, use the function Avatar({ person, size }) destructuring syntax. You can specify a default value like size = 100 , which is used for missing and undefined props.

How do you pass Prop to parent component?

To pass data from a child component to its parent, we can call a parent function from the child component with arguments. The parent function can be passed down to the child as a prop, and the function arguments are the data that the parent will receive.

Is it possible to pass Props from child to parent?

You can't pass props from child to parent in React, it's only one way (from parent to child). You should either: Put the state in the parent component and manipulate it from the child component by passing the setter function in the props.

How do I pass all props to child components?

Instead, to pass all React props from parent to child at once, you need to take advantage of the spread operator ( ... ). The spread operator lets you pass the entire props object to a child component as that child's props object.


1 Answers

I've solved it.

.add('with labeled custom options as props', () => ({
        components: {VSelect},
        data() {
            return {
                options: [{value: "CA", label: "Canada"}, {value: "UK", label: "United Kingdom"}]
            }
        },
        template:   `<v-select :options="options" />`
    }))

There were 2 problems with my former approach:

  • Passed data was not wrapped in a function
  • I should have pass data only. Using both props and data seems to make Vue return a warning (The data property "options" is already declared as a prop.) and ignore passed data (even though it's just a warning not an error, which I find odd)
like image 164
van_folmert Avatar answered Sep 25 '22 18:09

van_folmert