While exploring the Vue.js documentation, I came across an example of iteratively rendering a Tree using the v-for directive. My aim was to modify the code to render multiple TreeItems in the App.vue file.
I am puzzled by the fact that it is possible to iteratively render TreeItem by passing down a list of children objects in the 'TreeItem.vue' file but not when attempting to do so in App.vue. Despite reading through the docs, the usage of v-for seems inconsistent with how it works in 'TreeItem.vue'.
I would appreciate any explanation or insight into this matter!
Original code example: https://vuejs.org/examples/#tree
My initial attempt within the TreeItem component using v-for:
const listOfTrees = ref([{
name: 'My Tree 2',
children: [
{ name: 'hello' },
{ name: 'world' },
{
name: 'child folder',
children: [
{
name: 'child folder',
children: [{ name: 'hello' }, { name: 'world' }]
},
]
}
]
},{
name: 'My Tree',
children: [
{ name: 'hello' },
{ name: 'world' },
{
name: 'child folder',
children: [
{
name: 'child folder',
children: [{ name: 'hello' }, { name: 'world' }]
},
{ name: 'hello' },
{ name: 'world' },
{
name: 'child folder',
children: [{ name: 'hello' }, { name: 'world' }]
}
]
}
]
}
])
<template>
<ul>
<TreeItem class="item" f-for="tree in listOfTrees" :model="treeData"></TreeItem>
</ul>
</template>
I managed to achieve the desired result by iterating div elements in the second approach:
<template>
<!-- Wrapped the entire ul in a div and iterate the div's -->
<div v-for= "tree in listOfTrees">
<ul>
<TreeItem class="item" :model="tree"></TreeItem>
</ul>
</div>
</template>
The success of the second attempt raises the question of why the initial method did not produce the expected outcome. Your insights are welcomed!