Watch innerHTML of a vue component

Wasiq Bin Zahid 0
Viewed 40

I am currently using a npm package vue3-markdown-it to render markdown on some of my content. Now as soon as the component renders, I want to use its innerHTML and make some custom changes of my own before sending the content to my div However, as soon as the content changes, vue3-markdown-it takes some time to render the markdown, which is fine but if I add a watcher to the change of the content, the innerhtml of markdown component returns empty. I want to watch the innerHTML of the component so I can run my change function when it finishes rendering. Any idea how to acheive it?

data(){
return{
content: 'My content',
}
}

// at change of content markdown component automatically renders the
// new content with formatting, but it returns old data until rendering
// is complete, so I want to wait for the rendering to complete but
// without adding a timeout

watch: {
content: {
handler: function(){
myDiv.innerHTML = markedComponent.innerHTML + 'my changes'
}
}

// desired result
'markedComponent.innerHTML my changes'

// result I'm getting
"my changes"
markdown vue.js javascript
1 Answers

Using nextTick should solve your problem.

watch: {
  content: {
    handler(){
      Vue.nextTick(() => {
        myDiv.innerHTML = markedComponent.innerHTML + 'my changes'
      })
    }
  }
}
ryanhightower0
Related