Vue-ele-admin 的 Markdown 编辑器 html 不能显示，需要通过点击事件才能实现

热度：64 发布时间：2023-11-30 19:17:02.0

问题描述：

在使用 Vue-ele-admin 的 Markdown 编辑器（ tui.editor）的时候，如果想要展示编辑好的 html（实现思路来源于大佬的on-line example, 他使用监听点击事件获取 html，我们实操的时候当然想要自动展示而不是执行点击监听），传统思路就是：调用 markdown 组件但是不显示（v-show = “false”), 拿到 markdown 数据以后，调用 getHtml 方法获取 html, 然后通过 v-html 组件动态渲染。然而实际操作的时候发现，getHtml 方法没起作用，界面上html 并没有显示。
在这里插入图片描述

原因：

调用的 markdown 组件本身就还没有渲染完成就开始去执行 getHtml 方法，当然拿不到想要的 html 了。。。

解决方案：

使用 nextTick 方法，完成渲染以后再调用 getHtml 方法获取 html

getHtml() {
    this.$nextTick(() => {
    this.html = this.$refs.markdownEditor.getHtml()})console.log(this.html)},

查看全文