storybookjs/storybook
Using args/controls to change vue's local state
Offen
#12.073 geöffnet am 17.08.2020
argsfeature requesthas workaroundhelp wantedtriage:reviewedvue
Repository-Metriken
- Stars
- (89.909 Sterne)
- PR-Merge-Metriken
- (Durchschn. Merge 7T 22h) (184 gemergte PRs in 30 T)
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',
};