QMarkdown TOC and Vue composition api

[gvorster]

I want to create a TOC in my markdown.

The doc gives this example:

<q-markdown :src="markdown" toc @data="onToc" />

methods: {
  onToc (toc) {
    this.toc = this.$refs.markdown.makeTree(toc)
  }
}

I am using Vue composition api. I tried this:

<q-markdown ref="markdown" :src="content" toc @data="onToc"></q-markdown>

setup(props, context) {
  const markdown = ref()

  function onToc(toc) {
    markdown.makeTree(toc)   // gives error
    markdown.value.makeTree(toc) // also gives error
  }

  return {
    markdown,
    onToc
  }
}

This gives the error

"TypeError: markdown.makeTree is not a function"

or

"TypeError: Cannot read property 'makeTree' of undefined"

What am I doing wrong.
BTW, I did not see a full example, should the TOC automatically be added at the top of a markdown text?

[beets]

@gvorster I can’t help with the composition api, but

BTW, I did not see a full example, should the TOC automatically be added at the top of a markdown text?

No it is not as I recall from using the markdown app extension. It’s up to you to render it somewhere like a sidebar or at the top.

[metalsadman]

@gvorster should be ref(null) I think. You should prolly await a nextTick in your function too. If you translate the snippet into composition API, it would look something like this:

...
  const markdown = ref(null)
  const toc = ref(null)
  ...
  async func... 
    await context.root.$nextTick() // prolly don't need this line, test it with it without.
    toc.value = markdown.value.makeTree(t)
  ...

[gvorster]

@metalsadman said in QMarkdown TOC and Vue composition api:

@gvorster should be ref(null) I think. You should prolly await a nextTick in your function too. If you translate the snippet to composition would look about like this:

...
  const markdown = ref(null)
  const toc = ref(null)
  ...
  async func... 
    await context.root.$nextTick()
    toc.value = markdown.value.makeTree(toc)
  ...

Thanks, I tried nextTick but got the same error.

But anyway, I can see the passed TOC data inside the function so I can work with that to render it above the markdown text.

function onToc(toc) {
   console.log(toc);
}