1

I am attempting to setup a Vuetify treeview component to enable the pushing of input into the nested array of existing items. So far, I have been able to set up the component to enable the pushing of input into the nested array of a dynamically added item. However, I want to push new input into the nested array of the existing 'applications' item, instead of creating an entirely new item. How can I achieve this? See my code below. Thanks!

<template>
  <v-app data-app>
    <v-app-bar app flat>
      <v-text-field v-model="newItem" placeholder="add new item"></v-text-field>
      <div class="flex-grow-1"></div>
      <v-btn color="success" @click="addItem()">
        Add Item
      </v-btn>
    </v-app-bar>
    <v-treeview :items="items"></v-treeview>
  </v-app>
</template>

<script>
  export default {
    data: () => ({
      newItem: null,
      items: [
        {
          id: 1,
          name: 'Applications :',
          children: [
            { id: 2, name: 'Calendar : app' },
            { id: 3, name: 'Chrome : app' },
            { id: 4, name: 'Webstorm : app' },
          ],
        },
      ],
    }),
    methods: {
      addItem () {
        this.items.push({
          name: 'Applications :',
          children: [
            { id: 5, name: this.newItem },
          ],
        })
      }
    }
  }
</script>

JS_is_awesome18
  • 1,587
  • 7
  • 23
  • 67
  • Already answered here- https://stackoverflow.com/questions/54722203/how-to-add-a-new-node-in-v-treeview-vuetify – ajitspyd Jun 08 '20 at 07:54

0 Answers0