🐳

Vue.jsで`@storybook/addon-knobs`が動作しない...

に公開

@storybook/addon-knobsが動かない

Vue.jsをstorybookをインストールした際にできるコードは、以下のようになっていると思います。

index.storybook.js
/* eslint-disable import/no-extraneous-dependencies */
import { storiesOf } from '@storybook/vue'
import { action } from '@storybook/addon-actions'
import { linkTo } from '@storybook/addon-links'

import MyButton from '../components/MyButton.vue'

storiesOf('Button', module)
  .add('with text', () => ({
    components: { MyButton },
    template: '<my-button @click="action">Hello Button</my-button>',
    methods: { action: action('clicked') }
  }))
  .add('with JSX', () => ({
    components: { MyButton },
    render() {
      return <my-button onClick={this.action}>With JSX</my-button>;
    },
    methods: { action: linkTo('Button', 'with some emoji') }
  }))
  .add('with some emoji', () => ({
    components: { MyButton },
    template: '<my-button @click="action">😀 😎 👍 💯</my-button>',
    methods: { action: action('clicked') }
  }))

これ見る限りだとactionを利用するときはmethodsに定義して使えば良さそうです。
knobsの場合はどこに定義してtemplateに値を渡せばいいんでしょうか?data?computed?methods?という話です。

環境

CLI Or CLI-PLUGIN インストールされたライブラリ バージョン
vue-cli(3.4.0) vue 2.6.2
vue-cli-plugin-storybook(0.5.1) @storybook/vue 4.1.11
vue-cli-plugin-storybook(0.5.1) @storybook/addon-knobs 4.1.11

どこに書く?

まずはknobsを有効にするために以下の記載を追加しておきましょう。

config/storybook/config.js
import {addDecorator} from '@storybook/vue'
import {withKnobs} from "@storybook/addon-knobs";

addDecorator(withKnobs);

propsとして渡さないとknobsタブからの変更で画面が更新されませんでした。

index.stroybook.js
/* eslint-disable import/no-extraneous-dependencies */
import { storiesOf } from '@storybook/vue'
import { action } from '@storybook/addon-actions'
import {text} from "@storybook/addon-knobs";

import MyButton from '../components/MyButton.vue'

storiesOf('Button', module)
  .add('with text', () => {
    return {
      components: { MyButton },
      template: `<my-button @click="action">{{buttonText}}</my-button>`,
      methods: { action: action('clicked') },
      props: {
        buttonText: {
          default: text("button", "default"),
        },
      },
    }
  })

Discussion