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

Question

我想为 vue-select component using Storybook 添加一些故事，但我正在努力处理更复杂的案例，其中涉及传递道具或方法。

当我在模板中传递道具时 它起作用了:

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

我觉得可读性不太好，所以我想把它们分别作为 props 或 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 />`
    }))

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

我以前的方法有 2 个问题：

已通过data 未包含在函数中
我应该只通过 data。同时使用 props 和 data 似乎会使 Vue return 发出警告（数据属性 "options" 已声明为道具。）并忽略传递的 data（尽管这只是警告而不是错误，我觉得这很奇怪）

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

How to pass props to component's story?

javascript

vue.js

storybook