Question

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

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

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

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

我看过Vue.compile（）和渲染函数，但无法弄清楚如何使其工作或如何重新渲染？组件。

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

Answer 1

您应该让数据驱动视图。

换句话说，假设您有以下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合作的方式。

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

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），该数组将存储我想在视图中呈现的组件。当我通过ajax获取组件时，我将它们添加到此数组中。现在，如果我将html更改为：

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

每当更新components数组时，Vue都会自动将它们添加到视图中。

Answer 2

使用函数“ extend”和“ $ mount”：

axios.get(url).then((response) => {
    var MyComponent = Vue.extend({
        template: response.data
    })

    var compiled = new MyComponent().$mount()

    $('#div').append(compiled.$el)
})

Vue组件和AJAX加载的HTML内容

2 个答案: