Рекурсивный компонент Vuejs на Vueify

Question

Основываясь на примерах документации Vuejs, я пытаюсь создать простой компонент дерева, где я могу показать схему счетов без какого-либо интертекста (без добавления перетаскивания ... очень просто).

Я сделал пример на FiddleJs, но там отлично работает мой пример ... Я не знаю, почему в моем приложении я не могу заставить его работать! Я не знаю, если это некоторые проблемы с Vueify ... может быть, вы можете мне помочь!

Существует мой код:

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> 

Где я называю первый раз древовидное компонент

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

Проблема заключается в том, когда я звоню рекурсивно компонент в файле .vue.

Как это выше я получил следующее сообщение об ошибке:

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

Но это правильно зарегистрирован как OzTree! Я не понимаю!

У кого-нибудь есть идеи?

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>