Question

我需要一个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>

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()生命周期挂钩中建立该关系，该关系发生在第一个渲染之后，因此渲染甚至会在您进行设置之前失败。

如果您改为在created()挂钩中进行此工作，它将在第一个渲染之前进行设置，以避免失败。

有关这些钩子的更多详细信息，请参见lifecycle diagram。

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

1 个答案: