VueJS 和“vue-markdown”，当触发 `rendered` 事件时，DOM 还没有准备好答案

【问题标题】：VueJS and "vue-markdown", When `rendered` event is triggered the DOM is still not readyVueJS 和“vue-markdown”，当触发 `rendered` 事件时，DOM 还没有准备好
【发布时间】：2020-04-07 21:49:24
【问题描述】：

我有这个：

<vue-markdown :source="content" v-on:rendered="afterRenderContent"></vue-markdown>

但是当触发afterRenderContent 方法时，HTML 元素仍然不存在。

我想在渲染后进行 DOM HTML 元素操作，但我不能。等待 DOM 准备好的正确方法是什么？

我尝试创建一个 JSFiddle 来重现该问题，但看起来 CDN 库没有正确加载：

https://jsfiddle.net/fguillen/5wamjxke/

【问题讨论】：

标签： javascript vue.js events

【解决方案1】：

尝试将您的 afterRenderContent 方法移至已安装的生命周期挂钩。您只能在组件挂载后操作 DOM 元素。

mounted() {
    this.afterRenderContent()
}

在此处了解有关生命周期方法的更多信息：https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram。

我注意到您还使用了一些 vanilla javascript，在您的 js fiddle 中，可以在 vue 中使用 refs 以更直观的方式访问 DOM 元素。

<template>
    <h1 ref="header-one">Header One</h1>
</template>

// in your component method or mounted hook
mounted() {

    // access the header element 
    this.$refs['header-one']
}

编辑：更深入地了解也许这可能有效，从子组件挂钩到挂载的生命周期方法。

<vue-markdown :source="content" @hook:mounted="afterRenderContent"</vue-markdown>

关于如何在 vue 中使用 refs 的不错的博客 https://blog.logrocket.com/how-to-use-refs-to-access-your-application-dom-in-vue-js/

【讨论】：

它对我不起作用。 mounted 生命周期方法甚至在 vue-markdown 解析 Markdown 源之前就被触发。
我刚刚尝试从这样的父组件挂接挂载事件，<vue-markdown :source="content" @hook:mounted="afterRenderContent"</vue-markdown> 似乎适用于常规组件。查看 vue-markdown 挂钩到渲染的发射事件的文档也应该有效，但仍然奇怪它没有。
我看到mounted 事件甚至在vue-markdown 组件中的postrender 事件之前被触发。我仍然无法操作在mounted 事件中渲染 Markdown 源创建的 DOM 元素：/