storybookjs/storybook
Auf GitHub ansehenUsing args/controls to change vue's local state
Open
#12.073 geöffnet am 17. Aug. 2020
argsfeature requesthas workaroundhelp wantedtriage:reviewedvue
Beschreibung
I was under the impression that with storybook 6 I can change values in vue's data() property without my component using props. I Use TS and have declared two data properties: userMenuOpen and text. The code below reflects what i want to do. If it's not possible like with 5 I misunderstood.
Vue, typescript, storybook 6
Component:
export default class TopNavBar extends Vue {
userMenuOpen: boolean = false;
text: string = 'hello';
}
Story:
export default {
title: 'nav/TopNavBar',
excludeStories: /.*Data$/,
decorators: [StoryRouter()],
component: TopNavBar,
argTypes: {
userMenuOpen: { control: 'boolean' },
text: { control: 'text' },
},
};
const Template = (args: any, { argTypes }: any) => ({
components: { TopNavBar },
data() {
return {
userMenuOpen: args.userMenuOpen,
text: args.text,
};
},
template: '<top-nav-bar />',
});
export const Rounded = Template.bind({});
Rounded.args = {
userMenuOpen: true,
text: 'A different text',
};