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

Question

我想使用Storybook为vue-select组件添加一些故事,但我正在努力处理更复杂的情况,包括传递道具或方法.

当我在模板中传递道具时,它可以工作:

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

我发现它不太可读,所以我想将它们作为道具或数据单独传递:

.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 />`
    }))

但它们既没有data,也props没有被故事书所认可 - 它们似乎被忽略了.

Answer 1

我已经解决了.

.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" />`
    }))

我以前的方法有两个问题:

• 传递data没有包含在函数中
• 我应该只通过data.使用两者props并且data似乎使Vue返回警告(数据属性"options"已经被声明为prop.)并忽略传递data(即使它只是一个警告而不是错误,我觉得很奇怪)