How to display child elements from array in treeview (vuetify)?

Question

JavaScript

Vuetify has a treeview component that allows you to display data on the selected element in a separate block - https://v15.vuetifyjs.com/en/components/treeview#a...
While I was studying, the question arose how to display child elements in this array , on the example of such a case:
https://codepen.io/denisemenov/pen/GRRQWEb
The first three lines work out as they should, and then sadness.
How to output this data by child elements?

Answer 1

Let's make a function that will perform a recursive search:

const find = (arr, id) =>
  (Array.isArray(arr) ? arr : []).reduce((found, n) =>
    found || (n.id === id ? n : find(n.children, id))
  , null);

And, using it, we will rewrite the computed property:

selected() {
  return this.active.length
    ? find(this.users, this.active[0])
    : null;
},

UPD. I read the documentation - it turns out that everything can be done much easier. We specify a parameter for treeview return-object- then in active there will be objects instead of keys. Accordingly, there is no need to look for anything, the computed property will be reduced to

selected() {
  return this.active[0];
},