使用遞歸從嵌套數組中刪除 object

Question

我正在使用 vue-draggable 創建導航菜單。 結果數組可以有 N 個深層次。 我想通過它的 id 刪除 object。

數組看起來像：

[
  {
    "id": 1,
    "name": "Viedma",
    "slug": "viedma",
    "children": []
  },
  {
    "id": 6,
    "name": "Cultura",
    "slug": "Cultura",
    "children": [
      {
        "id": 2,
        "name": "Rio Negro",
        "slug": "rio-negro",
        "children": [
          {
            "id": 4,
            "name": "Edictos",
            "slug": "edictos",
            "children": []
          },
          {
            "id": 5,
            "name": "Deportes",
            "slug": "deportes",
            "children": []
          }
        ]
      }
    ]
  },
  {
    "id": 3,
    "name": "Policiales",
    "slug": "policiales",
    "children": []
  }
]

我已經嘗試了從嵌套數組中刪除 object的解決方案，但是由於我有一個數組而不是主 object 它不起作用。

請注意，我使用的是帶有 API 組合的 vue 3。 這就是我到目前為止所擁有的。 從 UI 調用remove()方法

setup(props, context) {
    const resources = ref(props.data)

    const removeFromTree = (parent, childNameToRemove) => {
      parent.children = parent.children
          .filter(function(child){ return child.name !== childNameToRemove})
          .map(function(child){ return removeFromTree(child, childNameToRemove)})
      return parent
    }

    const remove = (element) => {
      var tree = [...resources.value]
      resources.value = removeFromTree(tree, element.name)
    }

    return {
      resources,
      remove
    }
  }

順便說一句，如果父母被刪除，它的所有孩子也應該被刪除。