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

Question

我想template动态加载 VueJS 组件。我想使用 jQuery 进行 AJAX 调用，服务器返回的任何内容都应该是templateVueJS 组件的。这是代码的简化版本，删除了 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>"

在上面的示例中，我使用了创建的钩子，我认为该钩子适合于此，但新模板永远不会呈现，只会呈现旧模板。

有可能实现这一目标吗？

Answer 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"

（请原谅任何咖啡脚本错误，我对此不太熟悉）