Componente ricorsivo Vuejs su Vueify

Question

In base agli esempi di documentazione Vuejs Sto cercando di creare un semplice componente ad albero in cui è possibile visualizzare un piano di conti senza alcuna interferenza (non aggiungere né trascinamento ... molto semplice).

Ho fatto un esempio su FiddleJs ma funziona bene il mio esempio ... Non so perché sulla mia app non riesco a farlo funzionare! Non so se si tratta di alcuni problemi di Vueify ... potrebbe essere che tu possa aiutarmi!

V'è il mio codice:

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> 

Dove io chiamo la prima volta il componente di visualizzazione ad albero

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

Il problema è quando chiamo in modo ricorsivo il componente sul file ja .vue.

Come è sopra ho ottenuto il seguente errore:

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

ma è registrato correttamente come OzTree! Non riesco a capire!

Qualcuno ha qualche idea?

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>