Javascript Vue组件和AJAX加载的HTML内容

我有一个Vue组件，它基本上是复杂HTML标记的简写

在初始加载时，一切正常

我正在使用AJAX将更多这些组件加载到页面上，问题是该组件在使用AJAX加载后，不想被编译成HTML，我只得到未呈现的Vue组件，如下所示：

内容

我已经研究了Vue.compile（）和render函数，但不知道如何使其工作或如何重新渲染？组件

---

希望这是有意义的，有人能解释一下我应该在这里做什么吗？

你应该让数据驱动视图

换句话说，假设您有以下html：

<div id="app">
    <component></component>

    <!-- the following ones are inserted via ajax -->
    <component></component>
    <component></component>
</div>

您可能正在发出ajax请求并手动将

插入html。这不是使用Vuejs的方式

让数据驱动视图的方式是创建所需的数据：

var app = new Vue({
  el: '#app',
  data: {
    foo: 'bar',
    components: [
        {}, //component related data
        ...
    ]
  },

  components: {
    component,
  },

  ajaxRequest() {
    //this should push into your components array
    // example:
    $.ajax().done(function(data) {
        this.components.push(data);
    })
  }
}) 

在这段代码中，我向

数据

添加了一个新数组（

组件

），该数组将存储我要在视图中渲染的组件。当我通过ajax获取组件时，我将它们添加到这个数组中。现在，如果我将html更改为：

<div id="app">
    <component v-for="component in components" data="component">
    </component>
</div>

每当更新

组件

阵列时，Vue将自动将其添加到视图中。

使用函数“扩展”和“$mount”：

axios.get（url）.then（（响应）=>{
var MyComponent=Vue.extend({
模板：response.data
})
var compiled=new MyComponent（）.$mount（）
$（'#div'）。追加（已编译。$el）
})

我们能看到一些代码吗？不太清楚你在做什么。你说得对，我一直走错了方向，谢谢你的解释，现在应该可以让它工作了！

<div id="app">
    <component v-for="component in components" data="component">
    </component>
</div>