递归到Vue组件的模板部分？

Question

我以以下形式设置了此数据：

float Hue2RGB(float m1, float m2, float hue)
{
    hue = hue < 0 ? hue+1 : hue > 1 ? hue-1 : hue;

    if (hue * 6 < 1)
        return m1 + (m2 - m1) * hue * 6;
    else if (hue * 2 < 1)
        return m2;
    else if (hue * 3 < 2)
        return m1 + (m2 - m1) * (2.0 / 3.0 - hue) * 6;
    else
        return m1;
}

color_RGB HSL2RGB(color_HSL color)
{
    color.H = color.H / 360;

    float m2 = color.L <= 0.5 ? color.L * (color.S + 1) : color.L + color.S - color.L * color.S;
    float m1 = color.L * 2 - m2;

    color_RGB return_color;
    return_color.R = Hue2RGB(m1, m2, color.H + 1.0 / 3.0);
    return_color.G = Hue2RGB(m1, m2, color.H);
    return_color.B = Hue2RGB(m1, m2, color.H - 1.0 / 3.0);
    return_color.a = 1.0;

    return return_color;
}

我想将其呈现为树形菜单，如：

[{
  id: docID - 1,
  name: "Root Element - 1",
  parent: null
},
 {
   id: docID - 2,
   name: "Child Item - 1",
   parent: docID - 1
 }, {
   id: docID - 3,
   name: "Child Item - 2",
   parent: "docID - 2"
 }, {
   id: docID - 4,
   name: "Root Element - 2",
   parent: null
 }]

我可以Root Element - 1 ----------------Child Item - 1 -------------------------------Child Item - 2 Root Element - 2 使用类似的东西

console.log

但是如何在/* where parent === null */ let rootElements = getRootElements(); rootElements.forEach(rootElement => { console.log(rootElement.name); printChildItems(rootElement.id); }); function printChildElements(parentID) { /* where parent === parentID */ let childElements = getAllChildElements(parentID); if(chilElements === null) return; childElements.forEach(childElement => { console.log(childElement); /* recursive traversing */ printChildElements(childElements.id); }) }; 组件的模板部分进行递归？

Vue