TreeView in Vue not rendering subfolder content correctly

Question

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?

Phymo · Accepted Answer · 2020-07-27 05:18:09Z

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

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" }]
              }
            ]
          }
        ]
      }
    };

answered Jul 27, 2020 at 5:18

Phymo

1521 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

fi12 Over a year ago

In line 31 of TreeView.vue , which is <span v-if="isFolder">[{{ isOpen ? '-' : '+' }}]</span> , I tried replacing isOpen with child.isOpen, but I still can't get the child folder to expand.

Phymo Over a year ago

codesandbox.io/s/loving-booth-q3x4p?file=/src/components/… here is a rough example. maybe some errors. just for reference

Collectives™ on Stack Overflow

TreeView in Vue not rendering subfolder content correctly

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related