CODEWITHSUNDEEP
vue.jsstorybook
Callum
Callum

Reputation: 1165

Vue Storybook dynamic story

I am using Storybook to list all of the icons in the project. The list of icons is used in the dropdown. I need to load the SVG icon to parse into the <van-icon /> component.

My code below correctly loads an icon, but the issue is that the component does not update when you change the value in the dropdown.

Is there a better solution for what I am trying here? It seems like there's nothing in the Storybook documentation for creating dynamic storybook components. Perhaps I can just create a component manually with createcomponent which loads the icon?

import Icons from './index';

export default {
  title: 'Components/Icon',
  argTypes: {
    size: {
      control: { type: 'range', min: 10, max: 500 },
      defaultValue: 50,
    },
    name: {
      control: { type: 'select', options: Icons },
      defaultValue: Icons[0],
    },
  },
};

const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  template: `<van-icon v-bind="$props" :name="getIcon()" />`,
  methods: {
    getIcon() {
      return args.name ? require(`../../assets/icons/${args.name}.svg`) : '';
    },
  },
});

export const Default = Template.bind({});

Upvotes: 0

Views: 1464

Answers (1)

Hardik Raval
Hardik Raval

Reputation: 3651

I had a similar issue, I was not binding the props properly. I am posting my code here may be it help:

import DragIconComponent from "../components/DragIcon.vue";

const argTypes = {
  backgroundColor: { control: "color" },
};

export default {
  title: "Drag Icon",
  argTypes,
};

export const DragIcon = () => ({
  components: { DragIconComponent },
  props: { ...argTypes },
  template: `<div class="some-class">
      <DragIconComponent :mainColor="backgroundColor" />
    </div>`,
});

Upvotes: 1

Related Questions