5
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【備忘録】storybookのaddon-knobsとaddon-vue-info併用時に、knobsでのprops変更が2回目以降反映されないとき

5
Posted at

バージョン情報

@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回目以降動かないなーって声はちらほらあったのですが解決策が見つからず、
ひとりあたふたしていたところ偶然直った。
情報としては少ないかもですが、もし同じ境遇の方の参考になれれば幸いです:bow:

5
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?