How to add specific data to nested children in he-tree-vue
mfaridzia opened this issue · 1 comments
mfaridzia commented
The following is an example of an array of objects, where the data consists of four levels of nested data.
here I display the children's data on the he-tree-vue when the user presses the toggle on a specific element then makes a request to the api, so later the data is added to a certain array value based on existing data to be displayed as child data.
[{ // class
ClassID:"0ede11",
Title:"Mandiri",
children:[{ // course/subject
CourseID:"0ec2",
Title:"Math",
children:[ // chapter
{
ChapterId:"0ss23",
Title:"Test test",
},
{
ChapterId:"0ss23",
Title:"Test test"
},
{
ChapterId:"0se22",
Title:"Test test"
},
]
},
{
CourseID:"rere43",
Title:"History",
children:[
{
ChapterId:"0sse56",
Title:"Test test",
},
{
ChapterId:"0ss2qqq3",
Title:"Test test"
},
{
ChapterId:"0sefg22",
Title:"Test test"
},
]
}
]
}]
how do I add data to specific children, here I use the he-tree-vue library to display a data tree that can be dragged.
now i use following code, but it only works to add data on first child only.
getChapter(id, index) {
this.API.getChapter(id, (data) => {
console.log(data);
// I'm still confused in this part, how to dynamically add data to specific child data at each level
const newData = [...this.playlistData];
newData[index].children[index].children = data;
this.playlistData = newData;
},
(err) => {
console.log(err);
});
}
Thank you.
mfaridzia commented
Ok solved, I just need to save each index on each level then use it when going to add data.