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
無視されているようです。