My latest endeavour involves constructing a data tree in Vue, utilizing components.
Let's examine the provided data snippet:
"data": [
{
"id": 1,
"name": "foo",
"children": [
{
"id": 2,
"name": "bar",
"children": []
},
{
"id": 3,
"name": "hulu",
"children": []
}
]
},
{
"id": 4,
"name": "foobar",
"children": [
{
"id": 5,
"name": "foobar hulu",
"children": []
}
]
}]
My aim is to present this data in a table format like so:
ID ║ Name ║ Path
1 ║ foo ║ /foo
2 ║ bar ║ /foo/bar
3 ║ hulu ║ /foo/hulu
4 ║ foobar ║ /foobar
5 ║ foobar hulu ║ /foobar/foobar hulu
I have attempted to create a component that recursively calls itself when children are present. However, I encountered an issue with Vue.js only allowing one root element in a template.
Here are my current components:
var Element = {
props: ['context', 'path'],
name: 'self',
template: `
<tr>
<td>{{context.id}}</td>
<td>{{context.name}}</td>
<td>{{path}}</td>
</tr>
<self v-if="context.children.length != 0" v-for="child in context.children" :context="child" :path="path + '/' + child.name"></self>
`
};
var Tree = {
components: {
'element': Element
},
template: `
<table v-if="elements.length != 0">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Path</th>
</tr>
</thead>
<element v-for="element in elements" :context="element" :path="'/' + element.name"></element>
</table>
`,
How can I overcome this obstacle? I experimented with enclosing the element template within a tbody, which did accurately calculate the path and display all elements, but resulted in nested rows inside columns which looked unattractive.
https://i.stack.imgur.com/rmeAT.png
Any suggestions or ideas to tackle this challenge would be greatly appreciated!