@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"),
},
},
}
})