VueJS - Как инициализировать шаблон динамически с результатом ajax-вызова

Question

Я хочу загрузить template для компонента VueJS динамически. Я хотел бы сделать вызов AJAX с помощью jQuery, и все, что возвращает сервер, должно быть template компонента VueJS. Вот упрощенная версия кода с вызовом 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" 

(и извиняюсь за ошибки кофе-скрипт, я не очень хорошо знаком с ним)