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

しかし、ストーリーブックでは認識されずdataprops無視されているようです。

4

1 に答える 1