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" 

（和原諒任何咖啡腳本錯誤，我不是很熟悉）