How to define a function in mdx?

[dragooncjw]

First, I want to ask if it has a export function to delete this

I'm using mdx to avoid this. However, I have no idea to use functions.
For example, I have code here:

<Story>
{{
  template: '<button @click="clickHandler">button</button>'
}}
</Story>

where should I define clickHandler?
I'v tried to import js file but in template it can not read import js files.

[dragooncjw]

By the way, if I use like below,

<Story>
  <Button onClick="clickHandler"></Button>
</Story>

It will show error 'Cannot add property _Ctor, object is not extensible'.

[shilman]

Which framework is that @click example?

[dragooncjw]

The framework I used is Vue. I've tried JSX by using onClick. It didn't work.
But I have found a solution on this url by mix stories.js and stories.mdx: https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#mixed-csf--mdx-stories

However, I still want to know the reason cause the error 'error 'Cannot add property _Ctor, object is not extensible'.

[shilman]

In Vue, how about this:

<Story>
{{
  template: '<button @click="clickHandler">button</button>',
  methods: {
    clickHandler: e => {
      e.preventDefault();
      console.log('hello');
    },
  }
}}
</Story>

Or this:

export const clickHandler = e => {
  e.preventDefault();
  console.log('hello');
}

<Story>
{{
  template: '<button @click="clickHandler">button</button>',
  methods: { clickHandler }
}}
</Story>

[dragooncjw]

Yes, it works! Thanks!!
But I found that it cannot use life cycle functions.
I'v write like this:

<Story>
{{
  template: '<button @click="clickHandler">button</button>',
  methods: { clickHandler },
  mounted () {
    console.log('mounted')
  }
}}
</Story>

But 'mounted' did not console.

[dragooncjw]

I found that if I use parameters: { notes: markdownNotes }
in Story in Preview, the second time I visit Doc tag, It will disappear. Which is the same in other way. Is it a bug?

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[shilman]

Late answer to your original question, but here are the docs for remixing docsPage:

https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/docspage.md#remixing-docspage-using-doc-blocks