如何将道具传递给组件的故事？

Question

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.

Answer 1

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)

Answer 2

Have you tried to bind the options in data with the options on your VSelect component?

Like this:

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