如何在 Vue 3 中推送遞歸數組？

Question

我必須開發一個具有無限線程的甘特圖。 如何遞歸地在子任務中插入子任務？ 提前致謝

<select class="border border-gray-300 rounded-lg" v-model="taskParent">
   <option value="" selected>Select parent</option>
   <option v-for="parent in taskParents" :key="parent.id" :value="parent">
       {{parent.name}}
   </option>
</select>


const taskParents = computed(() => {
        return tasks.reduce((curr, task) => {
            curr.push(task)
            task.children.forEach((child) => { //this foreach is the part to be changed
                curr.push(task)
                })
            return curr
         }, []);
    })

Answer 1

您可以使用此 function 來獲得數組的扁平表示

function flatten(item){
  const result = [item];
  item.children.forEach(child => {
     result.push(...flatten(child));
  });
  return result;
}

然后就寫

const taskParents = computed(() => { return flatten(task) }