Based on the Vuejs Documentation examples I am trying to do a simple treeview component where I can show a Chart of Accounts without any interection (no add no drag and drop... really simple).
I have made an example on FiddleJs but there works fine my example... I don't know why on my app I can't make it works! I don't know if it's some Vueify issues... may be you can help me!
There is my code:
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>
Where I call the first time the tree view component
<oz-chart-tree :model="chart"></oz-chart-tree>
The problem is when I call recursively the component on ja .vue file.
As it's above I got the following error:
app.js:23536 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
But is is properly registered as OzTree! I can't understand!
Somebody have any idea?
<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>