【问题标题】：Render HTML retrieved by axiom with Vue [duplicate]使用 Vue 渲染 axiom 检索到的 HTML [重复]
【发布时间】：2020-06-18 11:31:00
【问题描述】：

在我的 Vue 应用程序中，我有一个 ajax 调用来检索一些 HTML：

axios({
      method: 'GET',
      url: '/html-example'
})
.then(response => {
   this.htmlForm = response.data;
})

HTML 看起来像这样<h1><test></test></h1>，其中test 是我已经在 Vue 中注册的组件。

HTML 通过 div 显示：

<div v-html="htmlForm"></div>

但是组件<test></test> 没有被渲染。

如何渲染通过 ajax 收到的 HTML？

我的研究：

我一直在阅读有关async components 的信息，但据我了解，这只是对您的应用程序进行代码拆分，并且实际上仅在使用组件时才加载该组件。不过我已经在Vue中注册了组件，我只需要用VUE渲染HTML即可。
我发现了一个类似的问题here，但是，只有一个答案建议使用异步组件，但这不会重新渲染任何东西。

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

v-html 旨在将原始 HTML 片段插入代码中。 Vue 根本不干涉它。

为了实现您想要的，您需要一个完整构建的 Vue（即包括编译器）并手动实例化模板的 Vue 实例。

例如：

var res = Vue.compile(axiosHTML)

new Vue({
    data() {
        // Your reactive properties
        return {};      
    },
    render: res.render,
    staticRenderFns: res.staticRenderFns
}).$mount(/* htmlElementReference */);

【讨论】：