Javascript Vue无法呈现具有父对象的数据对象

我需要一个JS树对象，其中的子节点知道它们的父节点是谁。Vue对此似乎没有问题，至少在Vue Devtools中显示正确的无限扩展对象时是这样的：

。。。并在控制台中显示正确的父级：

问题在于，尝试在页面上呈现该数据时出现Vue错误：

HTML

<ol>
  <li>
    <b>family.name</b> {{ family.name }}
  </li>
  <li>
    <b>family.children[0].name</b> {{ family.children[0].name }}
  </li>
  <li>
    <b>family.children[1].name</b> {{ family.children[1].name }}
  </li>   
  <li>
  <!-- Add the extra brackets to this to see the "object" error -->
    <b>family.children[0].parent.name</b> { family.children[0].parent.name }
  </li>   
</ol>

如果你愿意，这里有一个活生生的例子

---

有人知道如何克服这个障碍吗？

您正在lifecycle hook中设置该关系，该关系在第一次渲染之后发生，因此在您设置该关系之前，渲染将失败

如果您在钩子中执行此操作，它将在第一次渲染之前设置它以避免失败

---

有关这些挂钩的更多详细信息，请参阅。

此外，需要在每个对象上预先定义

父属性。Vue无法检测到属性添加。@DecadeMoon感谢您提出这一重要观点@MSC该注释的解决方案是在您的子对象上放置
parent:null
，以便在Vue注入反应性观察器时该属性存在。我认为您不需要放置任何内容，除非有一个条件，即如果parent为null，则不会因为上述原因进行渲染。谢谢大家。WRT
parent:null
，我曾经看到Vue需要按照您的建议预先定义父属性，但正如您所看到的，它的渲染和反应很好，没有这样做：@MSC这是一个令人高兴的意外，因为您正在将
parent
分配给Vue已经跟踪的引用
    var app = new Vue({
    el: '.container',
    data: {
        family: {
            name: "Dad",
            children: [
                {
                    name: "Marcus",
                    children: [
                        {
                            name: "Bob"
                        }
                    ]
                },
                {
                    name: "Anna",
                    children: [
                        {
                            name: "Ringo"
                        }
                    ]       
                }           
            ]
        }
    },
    mounted() {
        this.family.children[0].parent = this.family;
        this.family.children[0].children[0].parent = this.family.children[0];
        this.family.children[1].parent = this.family;
        this.family.children[1].children[0].parent = this.family.children[1];
    }
  });