I want the user to be able to select whether to use one of these jsons: DataA
or DataB
.
With this code only loads DataA
.
args: {
getData: () => new Promise((resolve) => setTimeout(() => resolve({ data: dataA }))),
How can I fix it?
import dataA from "../__fixtures__/dataA.json";
import dataB from "../__fixtures__/dataB.json";
export default {
component: ParentComponent,
argTypes: {
getData: {
control: "function",
},
},
args: {
getData: () => new Promise((resolve) => setTimeout(() => resolve({ data: dataA }))),
},
};
export const Default = (args) => ({
components: { ParentComopnent },
props: Object.keys(args),
template: `
<ParentComopnent
:getData="getData"
/>
`,
});
It's likely that story control needs to specifically select a dataset, similarly shown in the documentation, something like:
argTypes: {
dataset: {
options: ['dataA', 'dataB'],
mapping: { dataA, dataB },
defaultValue: dataA,
}
},
Then a value that depends on a dataset can be computed in story component:
computed: {
getData() {
return this.dataset ?
new Promise((resolve) => setTimeout(() => resolve({ data: this.dataset }))) :
null;
}
},
template: ...