2016-04-21 13 views
5

Vuejs Dokümantasyon örneklerine dayanarak, basit bir ağaç görünümü bileşeni yapmaya çalışıyorum. Herhangi bir ara vermeden Hesaplar Tablosunu gösterebiliyorum (sürükle ve bırak ekleme yok ... gerçekten basit).Vueify'ın yinelemeli bileşeni Vueify

FiddleJ'lere bir örnek verdim ama örnekte iyi çalışıyor ... Uygulamamın neden işe yaramayacağını bilmiyorum! Bazı Vueify sorunları olup olmadığını bilmiyorum ... bana yardım edebilir misiniz? Ben ağaç görünümü bileşeni

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

sorun ilk kez çağrı

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

dediğim zaman olduğu

OzChartTree.vue:

benim kod yoktur ja .vue dosyasındaki bileşeni yinelemeli olarak.

Yukarıda var gibi

aşağıdaki hata var:

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

Ama düzgün OzTree olarak tescil edilir! Anlayamıyorum!

Birinin bir fikri var mı?

cevap

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

özyinelemeli bileşenler için belgeler: http://vuejs.org/guide/components.html#Recursive-Component – Jeff