2016-04-21 1 views
5

Basé sur les exemples de Documentation Vuejs j'essaye de faire un composant treeview simple où je peux montrer un plan de comptes sans n'importe quelle interection (ne pas ajouter aucun glisser-déposer ... vraiment simple).Vuejs composant récursif sur Vueify

J'ai fait un exemple sur FiddleJs mais ça marche bien mon exemple ... Je ne sais pas pourquoi sur mon application je ne peux pas le faire fonctionner! Je ne sais pas si c'est quelques problèmes de Vueify ... peut être vous pouvez m'aider!

Il est mon code:

OzChartTree.vue

<template> 

    <ul v-if="model.length"> 
     <li v-for="m in model" :class="{ 'is-group': m.children }"> 
      {{ m.name }} 
      <ul v-if="m.accounts"> 
       <li v-for="a in m.accounts"> 
        {{ a.name }} 
       </li> 
      </ul> 
      <oz-tree :model="m"></oz-tree> 
     </li> 
    </ul> 

</template> 

<script type="text/babel"> 

    import OzChartTree from './OzChartTree.vue' 

    export default { 

     components: { 
      OzTree: OzChartTree 
     }, 

     props: { 
      model: Array, 
     } 

    } 

</script> 

Où j'appelle la première fois que la composante de l'arborescence

<oz-chart-tree :model="chart"></oz-chart-tree> 

Le problème est quand je l'appelle récursivement le composant sur le fichier ja .vue.

Comme il est au-dessus j'ai eu l'erreur suivante:

app.js:23536 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Mais est correctement enregistré comme OzTree! Je ne peux pas comprendre!

Quelqu'un a une idée?

Répondre

12
<script type="text/babel"> 

    import OzChartTree from './OzChartTree.vue' 

    export default { 
     name: 'oz-tree-chart', // this is what the Warning is talking about. 

     components: { 
      OzTree: OzChartTree 
     }, 

     props: { 
      model: Array, 
     } 

    } 

</script> 
+2

documentation pour les composants récursifs: http://vuejs.org/guide/components.html#Recursive-Component – Jeff