VueJS - How to initialize a template dynamically with the result of an ajax call

Question

I want to load templatedynamically for a VueJS component. I would like to make an AJAX call using jQuery, and everything the server returns should be templatea VueJS component. The simplified version of the code with the AJAX call has been removed here, since it does not matter where the data comes from:

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

In the above example, I use created , which I thought was suitable for this, but the new template is never rendered, only the older one.

Can this be achieved?

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"

( script, )