遞歸一維嵌套數組以更新父節點

Question

我有一個一維嵌套數組：

nestedObj: [
   { id: 1, parentId: null, taskCode: '12', taskName: 'Parent', duration: 0, assignee: '', crewCount: 0, startDate: null, endDate: null, dependencies: []},
   { id: 2, parentId: 1, taskCode: '12100', taskName: 'Child one', duration: 0, assignee: '', crewCount: 0, startDate: null, endDate: null, dependencies: []},
   { id: 3, parentId: 2, taskCode: '12200', taskName: 'SubChild one', duration: 0, assignee: '', crewCount: 0, startDate: null, endDate: null, dependencies: []},
   { id: 4, parentId: 1, taskCode: '12200', taskName: 'Child two', duration: 0, assignee: '', crewCount: 0, startDate: null, endDate: null, dependencies: []}
]

根據上面的數據結構， taskName的樹視圖如下所示

-> Parent
        -> Child one
                   -> SubChild one
        -> Child two

這是我的問題：當我更新一個孩子的startDate時，它的直接父級的startDate應該更新為最小的startDate （其所有子級）並且這個過程應該傳播到根。 endDate反之亦然（即）最大startDate （其所有子項）。 我如何使用遞歸來實現這一點？

注意：假設日期是時間戳

提前致謝

Answer 1

您需要的遞歸 function 看起來像這樣：

methods: {
    adjustParent(item) {
      if (!item.parentId) return;   // top-level, exit

      const parent = this.nestedObj.find(o => o.id === item.parentId);
      const children = this.nestedObj.filter(o => o.parentId === item.parentId);

      parent.startDate = Math.min.apply(null, children.map(o => o.startDate));

      this.adjustParent(parent);  // recurse
    }
}

您可以在change時調用它，例如：

<div v-for="item in nestedObj">
  <input type="text" v-model="item.startDate" @change="adjustParent(item)" />
</div>

演示