将服务器端呈现的元素作为子项添加到Vue js parent

时间:2016-03-31 08:53:33

标签: javascript html vue.js serverside-rendering

我有一个带有“orders”的服务器端呈现页面和一个实例化为“父对象”的根Vue对象。是否可以将渲染的html命令作为子Vue对象的子项启动?

Vue js似乎在动态添加内容时效果最好,但在这种情况下,我希望能够从预先存在的标记向父级添加子级。它甚至可能吗?我试图找到解决方案,但我无法让它工作。基本上,我在网站上有几个div这样的

<div id="order-1">some content</div><div id="order-2">some other content</div>

我想将它们作为子项添加到我使用"new Vue({..."启动的Vue组件中,并将其元素设置在正文上。

所以基本上我想要这个结构

  

家长应用(使用新的Vue)    - &GT;订单1(页面渲染后添加为子项)    - &GT;订单2(在页面渲染后添加为子项)

2 个答案:

答案 0 :(得分:0)

您似乎正在向组件添加ajax内容。

为此你需要重新编译该组件或实例,以表明ajax内容已经是vue实例的一部分。

完成ajax请求后,你可以解雇:

Vue.$compile(this.$el);

其中

  

此。$ EL

将是您当前的元素或组件

答案 1 :(得分:0)

如果要使用全局组件,则需要在返回根应用程序组件之前将它们注入渲染器,以便它们在服务器端可用。 Vue服务器端无法呈现它无权访问的组件或。

的定义