TreeView in Vue not rendering subfolder content correctly

问题

I'm trying to build a TreeView from scratch in Vue. This is my code so far.

The first problem I'm encountering is that the content of the subfolders (like child folder 1) is not being displayed. The second problem is that minimizing the subfolders minimizes the whole treeview.

Could anyone help me understand why these two errors in functionality are occurring and how to fix them?

回答1:

1. your code only dealed with the first level of your folders, you should recursively revoke your tree components to deal with child folders. please refer to below article.

https://itnext.io/recursion-for-nested-tree-structure-components-in-vue-1cb600005475

2. your code is using one param (isOpen) to toggle minimizing all folders, so if isOpen is false, all folders minimized; you should use item.isOpen to deal with different item;

treeData: {
        name: "My Tree",
        isOpen: true,
        children: [
          { name: "hello" },
          { name: "wat" },
          {
            name: "child folder",
            isOpen: false,
            children: [
              {
                name: "child folder 1",
                isOpen: false,
                children: [{ name: "hello" }, { name: "wat" }]
              },
              { name: "hello" },
              { name: "wat" },
              {
                name: "child folder 2",
                isOpen: false,
                children: [{ name: "hello" }, { name: "wat" }]
              }
            ]
          }
        ]
      }
    };

来源：https://stackoverflow.com/questions/63108178/treeview-in-vue-not-rendering-subfolder-content-correctly