Storybook: How to pass props to Vue.js component's story?

[folmert]

I wanted to add some stories for vue-select, but I'm struggling with more complicated cases, which involve passing props or methods and storybook examples, sorry to say, are not very helpful.

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.

In imported VSelect.vue the template is digesting the passed options:

<template>
    <v-select :on-change="onchangecallback"
              :multiple="multiple"
              v-model="selected" :options="options"></v-select>
</template>

and I have default options set as props already:

<script>
    import Vue from 'vue'
    import vSelect from 'vue-select'

    Vue.component('v-select', vSelect);

    export default {
        props: {
            options: {
                default: function() { return ['one', 'two'] },
                type: Array
            },
            multiple: {
                default: false,
                type: Boolean
            },
            onchangecallback: {
                default: () => {alert('default')},
                type: Function
            }
        },
        data() {
            return {
                selected: null
            }
        }
    }
</script>

[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 60 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!

[firefox0102]

Just in case anyone else comes across this -
https://stackoverflow.com/questions/47077972/how-to-pass-props-to-components-story