用Vue呈现axiom检索的HTML

Question

在我的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？

我的研究：

• 我一直在阅读关于异步组件的文章，但据我所知，这只是对应用程序进行代码拆分，并且实际上只在使用时加载组件。但是，我已经在Vue中注册了组件，我只需要用VUE呈现HTML。
• 我发现了一个类似的问题这里，然而，只有一个答案建议使用异步组件，但这不会改变任何事情。

Answer 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 */);