vue.js - 从动态接收的 html 内容初始化组件

Question

我在 Laravel 应用程序中使用 VueJS 和 gulp 和 browserify。

我的 vue 组件与普通的 html 或刀片文件一起工作正常。

仅当我在加载页面后尝试加载 html 时才会出现此问题。（加载vue脚本后...）

例如：假设组件的签名是<todo-list />. 我正在尝试在模态中加载它。包含签名的 html 是从 jQuery Ajax 调用动态加载的。$.ajax().

我知道的一些事情：

1. 问题的原因很简单：由于页面已经加载，附加到body的vue脚本也加载了，所以它无法识别我从动态html内容加载的组件签名。

2. 我可以使用“onShow”模式事件。问题是我不知道如何调用 VueJS 来再次检查所有的 html 来解析那些组件标签。

Answer 1

我无法用 v-if 或 v-show 指令解决这个问题。

为了解决这个问题，我需要再次“编译”Vue App，调用：

var node = $('#ROOT_NODE_OF_COMPONENT').get(0);
this.$compile(node);

在将远程 HTML 内容加载到 DOM 后运行此代码。

PS：VueJS v1.0