[Vuejs]-How to efficiently build a tree from a tree structure

by

3👍

✅

createTree() returns nothing, so assigning the return value to children would just make children have an undefined value.

One solution is to recursively call a helper method (e.g., named "createNode") that creates the tree nodes from each array element (instead of recursively calling createTree()). Return the result from createTree(), and assign the return value to datatree:

function createTree(items) {
  const createNode = ({ data, children }) => ({
    ...data[0],
    children: children?.map(child => createNode(child))
  })
  return items.map(item => createNode(item))
}

// MyComponent.vue
export default {
  mounted() {
    this.datatree = createTree(this.items)
  }
}

demo

👤tony19

Leave a comment