VueJS – Comment initialiser un modèle dynamiquement avec le résultat d'un appel ajax

Je souhaite charger dynamiquement le template d'un composant VueJS. Je voudrais faire un appel AJAX à l'aide de jQuery, et quel que soit le retour du serveur devrait être le template du composant VueJS. Voici une version simplifiée du code avec l'appel AJAX supprimé car il n'est pas pertinent d'où proviennent les données:

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

Dans l'exemple ci-dessus, j'utilise le crochet créé qui, je l'ai pensé, convient, mais le modèle le plus récent n'est jamais rendu, seul le plus ancien.

Est-il possible d'y parvenir?

Vous pouvez utiliser v-partial dans votre modèle. Et lorsque vous avez chargé la partie, vous pouvez l'enregistrer via Vue.partial() . La valeur {{ partial }} est alors remplacée, ce qui rend la nouvelle partielle.

 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" 

(Et excusez toutes les erreurs de café-script, je ne le connais pas très bien)