How to add a new node in Vuetify

Question

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.

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., Feb 16 '19 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, Feb 16 '19 at 11:20
I posted something that might give you an idea how this could be done. [Check this out](/a/54618376/3634538). — Yom T., Feb 16 '19 at 11:31

score 7 · Accepted Answer · answered Feb 16 '19 at 20:30

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.

How to add a new node in Vuetify

1 Answers1

Linked