从动态接收的 html 内容初始化组件答案

【问题标题】：Initialize component from a html content received dynamically从动态接收的 html 内容初始化组件
【发布时间】：2016-10-13 23:20:03
【问题描述】：

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

我的 vue 组件可以正常处理普通的 html 或刀片文件。

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

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

我知道的一些事情：

【问题讨论】：

编译后不能真正动态加载vue组件。您应该改为 v-if 或 v-show 并将它们绑定到数据对象。您可以将 watch 或计算属性用于在页面编译时可能尚未加载的异步数据

【解决方案1】：

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

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

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

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

PS：VueJS v1.0

【讨论】：