带ElementUI消息的Vue MessageBox？

Question

我试图在我的Vue应用程序中使用MessageBox of ElementUI来显示动态的ElementUI内容。内容来自JSON数据，是一个HTML字符串，本质上需要解析为HTML。通常，您可以使用指令v-html来完成这一任务，但是在MessageBox组件中没有这样明显的选项。

显然，您可以在消息中呈现HTML，但是必须使用VNode方法(？)。我看到的示例展示了如果在脚本中编写，如何执行，但是由于我从JSON数据中将预先格式化的HTML作为字符串，所以我看不出如何将其用于我的优势。

我可能只需切换到另一个模态组件，但由于我已经使用了几个ElementUI组件，所以我宁愿将其全部保留在同一个系统中。

这是我的剧本：

<template>
    <div>
        <el-button
            v-if="body"
            type="text"
            @click="openModal"
        >More Info
        </el-button>
    </div>
</template>

<script>
export default {

    methods: {
        openModal() {
            const h = this.$createElement;

            this.$msgbox( {
                title: this.title,
                message: this.body,
                confirmButtonText: 'OK',
                closeOnClickModal: true,
                showCancelButton: false
            } );
        }
    },
    props: {
        body: String, // The MessageBox message
        title: String // The MessageBox title
    }
}
</script>

Answer 1

一个潜在的解决方案是将HTML编译成一个呈现函数，并将其传递给Vue的createElement。

message: this.$createElement(Vue.compile(this.body))

这里是基于文档的一个例子。