javascript - Vue 无法呈现具有父级的数据对象

Question

我需要一个 JS 树对象，其中的子节点知道他们的 parent 是谁。 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>

JS

    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];
    }
  });

如果您愿意，可以在https://s3-ap-southeast-2.amazonaws.com/mscau/vue-parenting.htm 找到一个实例。 .

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

Answer 1

您正在 mounted() 中建立该关系生命周期 Hook 发生在第一次渲染之后，因此在您设置它之前渲染就会失败。

如果您在 created() 内完成这项工作 Hook ，它将在第一次渲染之前设置它以避免失败。

参见 lifecycle diagram有关这些 Hook 的更多详细信息。