Vue组件和AJAX加载的HTML内容

我有一个Vue组件，它基本上是复杂的HTML标记的简写。Vue组件和AJAX加载的HTML内容

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

我使用AJAX将更多的这些组件加载到页面上，问题是这个组件加载了AJAX之后，并不想将其编译为HTML，我只获取了未呈现的Vue组件如下：

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

我已经看过Vue.compile（）和渲染功能，但无法弄清楚如何得到这个工作，或如何重新渲染？组件。

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

来源

2017-04-19 JonnyFoley

我们可以看到一些代码吗？不太清楚你在做什么。 – Bert

你应该让你的数据驱动视图。

换句话说，让我们假设你有以下的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公司会自动将它们添加到视图。

来源

2017-04-19 16:06:19 flipjms

你是真实的，我一直在想这个错误的方式，谢谢你的解释，应该能够得到它的工作吧！ – JonnyFoley

Vue组件和AJAX加载的HTML内容

回答

相关问题