如何将特定数据添加到 he-tree-vue javascript 库中的嵌套 children

Question

下面是一个objects数组的例子，其中数据由四层嵌套数据组成。

这里我在 he-tree-vue 上显示 children 的数据，当用户按下特定元素上的切换然后向 api 发出请求时，所以稍后数据是根据现有数据添加到某个数组值以显示为child数据。

[{ // 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"
               },
        ]      
      }
   ]
}]

如何给具体的children添加数据，这里我使用he-tree-vue库展示一个可以拖动的数据树

现在我使用以下代码，但它只适用于第一个 child。

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);
    });
 }

谢谢。

Answer 1

好的，我只需要保存每个级别的每个索引，然后在添加数据时使用它。

如何将特定数据添加到 he-tree-vue javascript 库中的嵌套 children

How to add specific data to nested children in he-tree-vue javascript library

javascript

tree

vue.js