javascript - Vue 组件和 AJAX 加载 HTML 内容

Question

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

在初始加载时，一切正常。

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

<component><slot>content</slot></component>

我看过 Vue.compile() 和渲染函数，但不知道如何让它工作或如何重新渲染？组件。

希望这是有道理的，任何人都可以阐明我应该在这里做什么吗？

Answer 1

您应该让数据驱动 View 。

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

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

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

和 js:

var app = new Vue({
  el: '#app',
  data: {
    foo: 'bar',
  }
})

您可能正在发出 ajax 请求并手动插入 <component></component>进入html。这不是您应该使用 Vuejs 的方式。

让数据驱动 View 的方式就是创建所需的数据:

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);
    })
  }
}) 

在这段代码中，我向 components 添加了一个新数组 ( data )这将存储我想在我的 View 中呈现的组件。当我通过 ajax 获取组件时，我将它们添加到这个数组中。现在，如果我将 html 更改为:

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

每当 components数组更新后，Vue 会自动将它们添加到 View 中。