Currently, I am utilizing an npm package called vue3-markdown-it to display markdown within some of my content. When the component renders, I need to access its innerHTML and make customized modifications before displaying it in my div.
However, there is a delay in rendering the markdown by vue3-markdown-it when the content changes, which is expected. But if I try to add a watcher for the change in content, the innerHTML of the markdown component returns empty. I want to observe the innerHTML of the component so that I can execute my modification function once the rendering is complete. Any suggestions on how to achieve this?
data(){
return {
content: 'My content',
}
}
// When the content changes, the markdown component automatically renders
// the new formatted content. However, it displays old data until rendering
// is completed. I want to wait for rendering to be done without using a timeout.
watch: {
content: {
handler: function(){
myDiv.innerHTML = markedComponent.innerHTML + 'my changes'
}
}
// Desired output
'markedComponent.innerHTML my changes'
// Output I'm currently receiving
"my changes"