web-dev-qa-db-ja.com

小道具をコンポーネントのストーリーに渡す方法は？

Suebook を使用して 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もストーリーブックでは認識されません-無視されているようです。

javascriptvue.jsstorybook
10
van_folmert

解決しました。

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

私の以前のアプローチには2つの問題がありました：

  • 渡されたdataは関数にラップされていません
  • dataのみを渡す必要があります。 propsとdataの両方を使用すると、Vueは警告を返します（データプロパティ "options"は既にプロップとして宣言されています）。渡されたdataは無視されます（エラーではなく単なる警告です） 、私は奇妙だと思う）
16
van_folmert

データ内のオプションを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"/>`
    }))
0
Stefano Nepa