Question

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

当我在模板中传递道具时，它可以正常工作：

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（尽管它只是一个警告不是错误，我觉得很奇怪）

Answer 2

您是否尝试使用VSelect组件上的选项绑定数据中的选项？

像这样：

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

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

2 个答案: