使用递归从嵌套数组中删除 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
    }
  }

顺便说一句，如果父母被删除，它的所有孩子也应该被删除。