Question

每当我点击HTML它会触发

时，我有两个link-a文件

$( "#content" ).load( "nav-a.html" );

我的base.html文件

<div id="content">
</div>

我的nav-a.html

<component-a> </component-a>

我的问题是组件-a没有rending，是否可以在jquery ajax加载？我在.load回调上尝试了vm.compile（）和vm。$ forceUpdate（）但没有任何反应。

Answer 1

不，有几个原因：

您可能不应该让另一个脚本修改由VueJS控制的DOM元素。它最有可能在最后破坏事物。要执行http请求，您可以使用Vue-resource。当然，它不会更新DOM（你应该将它映射到模板）; MVVM框架的整个想法是与View一起建立数据模型。

但即使在这种情况下，您也无法使用原始html注入来直接呈现组件，正如它在v-html指令的文档中所述：

内容以纯HTML格式插入 - 忽略数据绑定。请注意，您不能使用v-html来组成模板部分，因为 Vue不是基于字符串的模板引擎。相反，组件是首选作为UI重用和组合的基本单元。

来源：https://vuejs.org/v2/guide/syntax.html#Raw-HTML

所以你可能想要使用x-template，或者更方便的Vue single file components（我真的建议你去看看它们）。但无论如何，您可能需要更改应用程序的逻辑。

Answer 2

我有同样的问题。正如Cobaltway所说，由于XSS，在视图中动态加载HTML内容是不安全的。

但是..如果您确定自己的内容来源，可以像我一样：

在我的loadPage（target）函数中，我总是销毁我的vue实例并再次创建它。

所以..你可以这样创建你的vue：

let content_vue_set = {
    el: '#content',
    // And all your stuff here (data, methods, watchers, etc.)
};
let content_vue = new Vue(content_vue_set);

然后，每次在页面中加载一些内容时，只需这样做：

content_vue.$destroy(); // To destroy the last Vue instance
$('#content').load(new_content); // Actually render the new content
content_vue = new Vue(content_vue_set); // Re-compile your vue instance

正如我所说..它不是最佳解决方案，所以你可能会使用另一种逻辑。

希望这会有所帮助;-)

VueJS没有在jquery ajax加载上渲染组件

2 个答案: