バージョン情報
@nuxt 2.10.2
@storybook 5.2.5
storybook-addon-vue-info 1.3.2
問題点
タイトルの通り
- addon-vue-info
コンポーネントの情報を表示するアドオン - addon-knobs
コンポーネントのpropsをstorybook上で変更して動作や見た目を確認できるアドオン
上記を併用した際に、knobsのパネルでpropsを変更したところ、
一回目は変更がコンポーネントにも反映されるが、
二回目以降反映されないというバグ?が発生
なんか解決できた
真因はよくわからない(まだちゃんと調べてない)が、
.storybook/config.jsに記述していた、
addDecorator(withInfo)とaddDecorator(withKnobs)の順番が原因だったみたいなので備忘録。
withInfo => withKnobsの順だと、正常に動作した。
(あたまのいいひと、おしえてください!)
参考に手元の環境の.storybook/config.jsをば。
.storybook/addons.js
import '@storybook/addon-links/register';
import '@storybook/addon-viewport/register';
import 'storybook-addon-vue-info/lib/register';
import '@storybook/addon-knobs/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-backgrounds/register';
.storybook/config.js
import { configure, addDecorator, addParameters } from '@storybook/vue';
import { withKnobs } from '@storybook/addon-knobs';
import { withInfo } from 'storybook-addon-vue-info';
import centered from '@storybook/addon-centered/vue';
import 'normalize.css';
import '~/assets/styl/_base.styl';
// automatically import all files ending in *.stories.js
addParameters({
backgrounds: [
{ name: 'white', value: '#fff', default: true },
{ name: 'blue', value: '#016FBC' },
]
});
configure(require.context('../_app/components/stories', true, /\.stories\.js$/), module);
addDecorator(withInfo);
addDecorator(withKnobs);
addDecorator(centered);
抜粋
×:config.js
// 2回目以降うごかない
addDecorator(withKnobs);
addDecorator(withInfo);
〇:config.js
// 2回目以降もうごく
addDecorator(withInfo);
addDecorator(withKnobs);
自分同様、2回目以降動かないなーって声はちらほらあったのですが解決策が見つからず、
ひとりあたふたしていたところ偶然直った。
情報としては少ないかもですが、もし同じ境遇の方の参考になれれば幸いです![]()