Vuejs đệ quy thành phần trên Vueify

Question

Dựa trên các ví dụ tài liệu Vuejs Tôi đang cố gắng thực hiện một thành phần treeview đơn giản, nơi tôi có thể hiển thị Biểu đồ tài khoản mà không có bất kỳ sự can thiệp nào (không thêm kéo và thả ... thực sự đơn giản).

Tôi đã làm một ví dụ về FiddleJ nhưng có hoạt động tốt ví dụ của tôi ... Tôi không biết tại sao trên ứng dụng của tôi tôi không thể làm cho nó hoạt động! Tôi không biết nếu đó là một số vấn đề Vueify ... có thể là bạn có thể giúp tôi!

Có mã của tôi:

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> 

đâu tôi gọi là lần đầu tiên các thành phần cây

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

Vấn đề là khi tôi gọi đệ quy thành phần trên tập tin ja .vue.

Vì nó là ở trên tôi đã nhận lỗi sau:

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

Nhưng đang được đăng ký đúng như OzTree! Tôi không thể hiểu được!

Ai đó có ý tưởng gì?

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>