I'm currently making a tree view using Vuetify. The tree view uses this structure:

      items: [
    {
      id: 1,
      name: 'Applications :',
      children: [
        { id: 2, name: 'Calendar : app' },
        { id: 3, name: 'Chrome : app' },
        { id: 4, name: 'Webstorm : app' }
      ]
    },
    {
      id: 5,
      name: 'Documents :',
      children: [
        {
          id: 6,
          name: 'vuetify :',
          children: [
            {
              id: 7,
              name: 'src :',
              children: [
                { id: 8, name: 'index : ts' },
                { id: 9, name: 'bootstrap : ts' }
              ]
            }
          ]
        },
        {
          id: 10,
          name: 'material2 :',
          children: [
            {
              id: 11,
              name: 'src :',
              children: [
                { id: 12, name: 'v-btn : ts' },
                { id: 13, name: 'v-card : ts' },
                { id: 14, name: 'v-window : ts' }
              ]
            }
          ]
        }
      ]
    },
    {
      id: 15,
      name: 'Downloads :',
      children: [
        { id: 16, name: 'October : pdf' },
        { id: 17, name: 'November : pdf' },
        { id: 18, name: 'Tutorial : html' }
      ]
    },
    {
      id: 19,
      name: 'Videos :',
      children: [
        {
          id: 20,
          name: 'Tutorials :',
          children: [
            { id: 21, name: 'Basic layouts : mp4' },
            { id: 22, name: 'Advanced techniques : mp4' },
            { id: 23, name: 'All about app : dir' }
          ]
        },
        { id: 24, name: 'Intro : mov' },
        { id: 25, name: 'Conference introduction : avi' }
      ]
    }
  ]
})

And it will look like this:

My problem is in adding a new node to this structure, For example if I want to add a child under applications then the code would probably look like this:

this.items[0].children.push(newObject)

Or if I want to add under src? then it might look like this:

this.items[1].children[0].children.push(newObject)

If I want to go deeper then it might look like this:

this.items[0].children[0].children[0].children[0].children[0].children.push(newObject)

As you can see, the way I add a node varies and the code changes depending on the location and depth of where I want to add the node. That means there is no single code that will cater for all the locations. Also I can add and nest as many node as I can. example is google drive How should I go about this? I've run out of ideas and is looking for any suggestions that might help.

I'm currently making a tree view using Vuetify. The tree view uses this structure:

      items: [
    {
      id: 1,
      name: 'Applications :',
      children: [
        { id: 2, name: 'Calendar : app' },
        { id: 3, name: 'Chrome : app' },
        { id: 4, name: 'Webstorm : app' }
      ]
    },
    {
      id: 5,
      name: 'Documents :',
      children: [
        {
          id: 6,
          name: 'vuetify :',
          children: [
            {
              id: 7,
              name: 'src :',
              children: [
                { id: 8, name: 'index : ts' },
                { id: 9, name: 'bootstrap : ts' }
              ]
            }
          ]
        },
        {
          id: 10,
          name: 'material2 :',
          children: [
            {
              id: 11,
              name: 'src :',
              children: [
                { id: 12, name: 'v-btn : ts' },
                { id: 13, name: 'v-card : ts' },
                { id: 14, name: 'v-window : ts' }
              ]
            }
          ]
        }
      ]
    },
    {
      id: 15,
      name: 'Downloads :',
      children: [
        { id: 16, name: 'October : pdf' },
        { id: 17, name: 'November : pdf' },
        { id: 18, name: 'Tutorial : html' }
      ]
    },
    {
      id: 19,
      name: 'Videos :',
      children: [
        {
          id: 20,
          name: 'Tutorials :',
          children: [
            { id: 21, name: 'Basic layouts : mp4' },
            { id: 22, name: 'Advanced techniques : mp4' },
            { id: 23, name: 'All about app : dir' }
          ]
        },
        { id: 24, name: 'Intro : mov' },
        { id: 25, name: 'Conference introduction : avi' }
      ]
    }
  ]
})

And it will look like this:

My problem is in adding a new node to this structure, For example if I want to add a child under applications then the code would probably look like this:

this.items[0].children.push(newObject)

Or if I want to add under src? then it might look like this:

this.items[1].children[0].children.push(newObject)

If I want to go deeper then it might look like this:

this.items[0].children[0].children[0].children[0].children[0].children.push(newObject)

As you can see, the way I add a node varies and the code changes depending on the location and depth of where I want to add the node. That means there is no single code that will cater for all the locations. Also I can add and nest as many node as I can. example is google drive How should I go about this? I've run out of ideas and is looking for any suggestions that might help.

• javascript
• vue.js
• vuetify.js

• 1 One thing you could do is to iterate through these nodes and find one by the id or name then simply .push() the new item onto the children. – Yom T. Commented Feb 16, 2019 at 10:45
• @jom Can you please give an example on how to use Vue.set() with my example above. I read about Vue.set() and the way I understood it is that it just makes it reactive. Thank you for you suggestion by the way. – FledglingDeveloper Commented Feb 16, 2019 at 11:20
• 1 I posted something that might give you an idea how this could be done. Check this out. – Yom T. Commented Feb 16, 2019 at 11:31

1 Answer 1

If you are adding nodes directly from the tree, the easiest way is by using scoped slots. For example, you can use the append slot to add something to each item. Since the item is passed to the slot, you can pass it to a function that can easily add a child to that object.

<v-app>
  <v-treeview :items="items">
    <template slot="append" slot-scope="{ item }">
      <v-btn @click="addChild(item);">Add child</v-btn>
    </template>
  </v-treeview>
</v-app>

addChild(item) {
  if (!item.children) {
    this.$set(item, "children", []);
  }

  const name = `${item.name} (${item.children.length})`;
  const id = this.nextId++;
  item.children.push({
    id,
    name
  });
}

Otherwise just walk recursively through the tree until you find the item you want to add to.

findItem(id, items = null) {
  if (!items) {
    items = this.items;
  }

  return items.reduce((acc, item) => {
    if (acc) {
      return acc;
    }

    if (item.id === id) {
      return item;
    }

    if (item.children) {
      return this.findItem(id, item.children);
    }

    return acc;
  }, null);
}

You can see an example in codesandbox.