1
我尝试使用组件在Vue中构建数据树。正确输出嵌套数组
考虑以下数据:
"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": []
}
]
}]
现在我想与像一个表输出它:
ID║名称║路径
1║FOO║/富
2║巴║/foo/bar
3║hulu║/ foo/hulu
4║foobar║/ foobar
5║foobar hulu║/ foo酒吧/ foobar hulu
我试过使用一个组件“调用”本身,如果有儿童可用。问题是Vue.js只允许一个根元素。
我的部件:
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>
`,
你如何绕过这个问题?我试过在tbody内包装元素模板。这将正确计算路径并输出所有元素,但这会产生嵌套在列中的行,看起来非常难看。
任何想法?
太棒了!不幸的是你的codepen不起作用,但我自己想出来了。为什么使用计算属性输出数据?是不是v-for =“flatten(paths,'/',[])”是相同的? – Qobus
@Qobus我正在玩codepen一段时间,所以有可能你点击链接,当它处于一个糟糕的状态;道歉。它应该现在工作。我正在使用计算属性,因为展平路径是从原始路径派生的。通过使用计算,如果原始路径改变,平坦路径将被重新计算并反映新的状态。 – Bert
@Qobus通常它看起来更干净,至少对我来说。你是正确的,v-for =“平坦路径(路径,'/',[])”将完成几乎相同的事情。 – Bert