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"/>`
});