VueJS - 如何使用 ajax 调用的结果动态初始化模板

【问题标题】：VueJS - How to initialize a template dynamically with the result of an ajax callVueJS - 如何使用 ajax 调用的结果动态初始化模板
【发布时间】：2025-12-04 19:55:01
【问题描述】：

我想为 VueJS 组件动态加载 template。我想使用jQuery进行AJAX调用，无论服务器返回什么都应该是VueJS组件的template。这是删除了 AJAX 调用的代码的简化版本，因为它与数据的来源无关：

BoardFeed = Vue.extend
    template: '<div>This should be replaced</div>'
    data: ->
            return items: null
    created: ->
        @template = "<div>Template returned from server, what I really want</div>"

在上面的示例中，我使用了 created 钩子，我认为它适用于此，但新模板永远不会渲染，只会渲染旧模板。

有可能实现吗？

【问题讨论】：

标签： javascript mvvm coffeescript vue.js

【解决方案1】：

您可以在模板中使用v-partial。当你加载了部分，你可以通过Vue.partial()注册它。然后替换 {{ partial }} 值，从而呈现新的部分。

BoardFeed = Vue.extend
    template: '<div v-partial="{{ partial }}">This should be replaced</div>'
    partials: {"beforeLoad": "<div>This should be replaced</div>"}
    data: ->
            return {items: null, partial: "beforeLoad"}
    created: ->
        Vue.partial("afterLoad", "<div>Template returned from server, what I really want</div>")
        @partial = "afterLoad"

（请原谅任何咖啡脚本错误，我不是很熟悉）

【讨论】：