Menu
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.
571
To pass props, add them to the JSX, just like you would with HTML attributes. To read props, use the function Avatar({ person, size }) destructuring syntax. You can specify a default value like size = 100 , which is used for missing and undefined props.
To pass data from a child component to its parent, we can call a parent function from the child component with arguments. The parent function can be passed down to the child as a prop, and the function arguments are the data that the parent will receive.
You can't pass props from child to parent in React, it's only one way (from parent to child). You should either: Put the state in the parent component and manipulate it from the child component by passing the setter function in the props.
Instead, to pass all React props from parent to child at once, you need to take advantage of the spread operator ( ... ). The spread operator lets you pass the entire props object to a child component as that child's props object.
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)
164
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With