holiber / sl-vue-tree

Customizable draggable tree component for Vue.js
MIT License
344 stars 79 forks source link

Any examples for working with a pre-existing data structure? #91

Open egeersoz opened 3 years ago

egeersoz commented 3 years ago

Trying to have sl-vue-tree display an existing nested data structure. Example:

{"Activities": [
  {
    "Options": {
      "User ID": 1000
    },
    "Name": "Find Projects",
    "Activity Type ID": 5
  },
  {
    "Name": "For Each Project",
    "Activity Type ID": 6,
    "Activities": [
      {
        "Name": "Find the Project",
        "Activity Type ID": 4
      },
      {
        "Name": "Assign Task",
        "Activity Type ID": 7
      },
    ]
  }
]
}

I managed to have sl-vue-tree display the top nodes using this:

this.activities = this.process.Activities.map(activity => {
   return {
       title: activity.Name,
       'children?': activity.Activities,
       'isLeaf?': true,
       'isExpanded?': true,
       'isSelected?': false,
       'isDraggable?': true,
       'isSelectable?': true
     }
  })
})

But the second one, which has children, won't expand and show them.