I wanted to add some stories for vue-select component using Storybook, but I'm struggling with more complicated cases, which involve passing props or methods.
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.
I've solved it.
.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" />`
}))
There were 2 problems with my former approach:
data
was not wrapped in a functiondata
only.
Using both props
and data
seems to make Vue return a warning (The data property "options" is already declared as a prop.) and ignore passed data
(even though it's just a warning not an error, which I find odd)