Initialiser un composant à partir d'un contenu html reçu dynamiquement

Question

J'utilise VueJS avec gulp et browserify dans une application Laravel.

Mes composants de vue fonctionnent correctement avec les fichiers html ou lame normaux.

Le problème se produit uniquement lorsque j'essaie de charger le code HTML après le chargement de la page. (après le chargement du script vue ...)

Ex: Supposons que la signature du composant est <todo-list />. J'essaye de le charger dans un modal. Le code HTML contenant la signature est chargé dinamiquement à partir d'un appel jQuery Ajax. $.ajax().

Somethings je sais:

1. La cause du problème est simple: depuis que la page était déjà chargée, le script de vue attaché au corps est chargé aussi, donc il ne peut pas reconnaître ma signature composante chargé à partir du contenu html dinamic.

2. Je peux utiliser l'événement modal "onShow". Le problème est que je ne sais pas comment appel VueJS pour vérifier tout le HTML à nouveau l'analyse de ces balises de composants.

Answer 1

Impossible de résoudre ce problème avec les directives v-if ou v-show.

Pour résoudre, il me fallait « compiler » l'App Vue à nouveau, appeler:

var node = $('#ROOT_NODE_OF_COMPONENT').get(0); 
this.$compile(node); 

Exécutez ce code après le contenu HTML distant a été chargé dans le DOM.

PS: VueJS v1.0