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

Question

我想为动态加载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钩，我认为将是适用于这一点，但新模板永远不会渲染，只有较旧的模板。

有没有可能做到这一点？

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" 

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