How can I choose between one json or another in a storybook?

Viewed 56

Basically, I would like something like a dropdown or radio where I can choose which json to use. I imagine something like that if I select the label person1 in a dropdown or radio, the respective json would be loaded.

something like this:

import person1 from "./person1.json";
import person2 from "./person2.json";
const enumJsonData = {
    person1: () => new Promise((resolve) => resolve({ data: person1 })),
    person2: () => new Promise((resolve) => resolve({ data: person2 })),
};

I'm new to this, I haven't been able to do it. I have a component that receives a promise with the json to be loaded.

For the purposes of what I need to do in my real project, I need to do it this way

this is my live code (I don't know why it doesn't work anymore :( but here you can see the code):

https://codesandbox.io/s/vue-storybook-forked-isuntq?file=/src/test.stories.js

I have tried many things, hope you can help me.

This is my full code:

sample usage:

 <template>
   <MyComponent :promiseGetName="promise" />
 </template>
    .
    import person1 from "./person1.json";
    .
    promise: new Promise((resolve) => resolve({ data: person1 })),

MyComponent.vue

<template>
  <p>Person:{{ name }}</p>
</template>

<script>
export default {
  props: {
    promiseGetName: Promise,
  },
  data() {
    return {
      name: "",
    };
  },
  methods: {
    async fetchData(promise) {
      const dataName = await promise;
      this.name = dataName.data.name;
    },
  },

  async mounted() {
    this.fetchData(this.promiseGetName);
  },
};
</script>

person1.json

{
  "name": "goku"
}

person2.json

{
  "name": "vegeta"
}

story

import MyComponent from "./MyComponent";
import person1 from "./person1.json";
import person2 from "./person2.json";

export default {
  title: "MyComponent",
  argTypes: {
    promise: {
      control: "function"
    }
  },
  args: {
    promise: () => new Promise((resolve) => resolve({ data: person1 }))
  }
};

export const demo = () => ({
  components: { MyComponent },
  template: `<MyComponent :promise="promise"/>`
});
0 Answers
Related