How to dynamically insert component in to template using knobs for Storybook

Question

I'm beginner in storybook, trying to create stories of a simple button and a button with icons. I want to be able to switch the icons in the button from the knobs section. For eg:

export const textButton = () => ({
  components: { PButton },
  template: `<p-button
      :color="color"
      :text="label"
    />`,
  props: {
    color: {
      default: select(
        "color",
        ["transparent", "black", "blue", "orange"],
        "black"
      )
    },
    label: { default: text("label", "Button") }
  }
});

Above is the story for a simple button which I'm able to switch the colors from the knobs section. Similarly, I want the correct syntax for the template so I can switch the icons inside the button which are separate components.

    export const textWithIcon = () => ({
      components: { PButton, Arrow, Bullet, Check, Chevron, Cross, Delete, Edit, Info, Lock, Play, Plus, Search, UpDown, Upload },
      template: `<p-button
        :text="label"
        :color="color"
      >
        <template v-slot:icon>{{icon}}</template>
      </p-button>`,
      props: {
        icon: {
          default: select('icon', ['<Arrow />', '<Bullet />', '<Check />', '<Chevron />', '<Cross />', '<Delete />', '<Edit />', '<Info />', '<Lock />', '<Play />', '<Plus />', '<Search />', '<UpDown />', '<Upload />'], '<Arrow />'),
        },
        label: { default: text('label', 'Button') },
      },
    });

How do I achieve this? what is the correct format? Somebody please guide me, or send a link to the docs. I couldn't find anything related to this requirement.

Answer 1

I solved this by using the

<component v-bind:is="currentTabComponent"></component>

So i had to just supply the name string to the component, make sure to import all components.