QMarkdown TOC and Vue composition api



  • 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?



  • @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.



  • @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)
      ...
    


  • @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);
    }
    

    Selection_006.png


Log in to reply