Vue Tree flatten array or recursive component

Question

Hi guys I'm trying to build Tree component in Vue, I'm having a little doubt now I have already built a recursive component, similar to this one, but more complex with checkboxes, drag drop etc

https://v2.vuejs.org/v2/examples/tree-view.html

But now I'm looking at some samples online and it looks of them are made by flattening nested json and making a Tree out of it

Like this one:

https://jsfiddle.net/fernando2684/p0k8szvj/43/

Hi here recursive builds array and then builds Tree out of it

   recursive(obj, newObj, level, itemId, isExpend) {
      let vm = this;

      obj.forEach(function(o) {
        if (o.children && o.children.length != 0) {
          o.level = level;
          o.leaf = false;
          newObj.push(o);
          if (o.id == itemId) {
            o.expend = isExpend;
          }
          if (o.expend == true) {
            vm.recursive(o.children, newObj, o.level + 1, itemId, isExpend);
          }
        } else {
          o.level = level;
          o.leaf = true;
          newObj.push(o);
          return false;
        }
      });
    },

Could someone tell, what could be real benefit out of this, I see it could be easier to maintain and all the data in array is reactive since it is only in one level ???

My guess (based on Redux) is that flat object structure is easier to manage (imagine mutating nested object several levels deep) — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Feb 25, 2020 at 14:17
Yes that was my guess because in Vue it tracks only one level deep — Loki
– Loki, Commented Feb 25, 2020 at 14:18

Daniel · Accepted Answer · 2020-02-25 16:00:37Z

1

It's a matter of optimizing the data for use in the template.

Flat array

If you're rendering a table, using recursive components will be difficult to implement.

If you have an array, you can pass it through a v-for and you end up with a single component that has all the children (no matter the depth) as direct children. This makes controlling actions easier.

Nested Object

But if you want to use divs that recursively indent, then using a flat array is more difficult.

If you were to use objects, you would have to use recursive components with their individual parent-child relationships that need to bubble up.

Do which ever suits you better, but don't think optimizing data for template is worse than creating more complex component relationships.

edited Feb 25, 2020 at 16:00

answered Feb 25, 2020 at 15:51

Daniel

35.9k17 gold badges115 silver badges163 bronze badges

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

5 Comments

Loki Over a year ago

what do you mean by optimizing the data for use ? Which solution would you use recursive or with v-for ?

Daniel Over a year ago

updated answer.... should be more clear. I wouldn't say one is better than the other, but both are better than the other in some cases.

Daniel Over a year ago

The template rendering has logic that is abstracted from us, and sometimes it is tempting to use complex template directives to achieve a goal, when a (relatively simple) function to clean up the data may be more appropriate.

Loki Over a year ago

Thank you so much :)

Loki Over a year ago

sorry to bother you, but if you have time could you alos check this one stackoverflow.com/questions/60217438/…, because Im having a problem with selecting checkboxes I would be really gratefull :)

Collectives™ on Stack Overflow

Vue Tree flatten array or recursive component

1 Answer 1

It's a matter of optimizing the data for use in the template.

Flat array

Nested Object

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

It's a matter of optimizing the data for use in the template.

Flat array

Nested Object

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related