Vuejs rekursive Komponente auf Vueify

Question

Basierend auf den Beispielen der Vuejs-Dokumentation versuche ich eine einfache Treeview-Komponente zu erstellen, in der ich ein Kontenverzeichnis ohne jegliche Intezion zeigen kann (ohne Drag & Drop ... wirklich einfach).

Ich habe ein Beispiel auf FiddleJs gemacht, aber es funktioniert gut mein Beispiel ... Ich weiß nicht warum auf meiner App kann ich es nicht funktioniert! Ich weiß nicht, ob es irgendwelche Vueify-Probleme sind ... vielleicht kannst du mir helfen!

Es ist mein 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> 

Wo ich das erste Mal Komponente der Baumansicht aufrufen

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

Das Problem ist, wenn ich rufe rekursiv die Komponente auf ja .vue Datei.

Wie es oben bekam ich folgende Fehlermeldung:

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

Aber ist richtig als OzTree registriert! Ich kann es nicht verstehen!

Hat jemand eine Idee?

Answer 1

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