2016-04-21 106 views
5

基於Vuejs文檔示例,我試圖做一個簡單的treeview組件,我可以在其中顯示沒有任何聯繫的帳戶圖表(不添加任何拖放操作...非常簡單)。Vueify上的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> 

問題是,當我打電話遞歸地在ja .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!我無法理解!

有人有什麼想法嗎?

回答

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

遞歸組件的文檔:http://vuejs.org/guide/components.html#Recursive-Component – Jeff