13

我想使用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承认——它们似乎被忽略了。

4

1 回答 1

26

我已经解决了。

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

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

  • Passeddata未包含在函数中
  • 我应该只有通过data。使用这两者props似乎data会使 Vue 返回一个警告（数据属性“选项”已被声明为一个道具。）并忽略传递data（即使它只是一个警告而不是一个错误，我觉得这很奇怪）
于 2017-11-03T10:15:25.780 回答