vue.js 对象数组筛选根节点

如果你有一个对象数组，每个对象都有一个 parent_id 字段表示其父节点的 ID，你想筛选出根节点（即 parent_id 为 null 或 undefined 的节点），可以使用 Array.filter() 方法和箭头函数来实现。

比如，假设你有一个对象数组如下：

const data = [
  { id: 1, parent_id: null, name: 'Root' },
  { id: 2, parent_id: 1, name: 'Child 1' },
  { id: 3, parent_id: 1, name: 'Child 2' },
  { id: 4, parent_id: 2, name: 'Grandchild 1' },
  { id: 5, parent_id: 3, name: 'Grandchild 2' },
  { id: 6, parent_id: 4, name: 'Great-grandchild' },
];

你可以这样筛选出根节点：

const rootNodes = data.filter(node => node.parent_id == null);

这会返回一个数组，包含所有根节点。

如果你想在 Vue.js 中使用这个筛选器，可以将其放在计算属性中：

computed: {
  rootNodes() {
    return this.data.filter(node => node.parent_id == null);
  }
}

然后在模板中使用它：

<ul>
  <li v-for="node in rootNodes" :key="node.id">
    {{ node.name }}
    <!-- 子节点的渲染逻辑 -->
  </li>
</ul>

这样就可以渲染出所有根节点及其子孙节点了。