[Vuejs]-V-treeview not updating child nodes dynamically

by

5👍

✅

In order to properly render this without any additional manipulation, each item in the fileTree array needs to have a property of children:[]

👤TheGeekZn

0👍

Please find the below snippet where i tried to replicate your scenario.

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: () => ({
    tree: [],
    items: [
      {
        id: 1,
        parentId: null,
        folderName: "My Documents"
      },
      {
        id: 2,
        parentId: 1,
        folderName: "Root Folder 1"
      },
      {
        id: 3,
        parentId: 1,
        folderName: "Root Folder 2"
      }
    ]
  }),
  mounted() {
    Array.from(this.items).map((it, i) => {
      this.$set(this.items[i], 'children', [])
    });
  },
  methods: {
    addFolder: function () {
      const _id = Math.floor(Math.random() * 100) + 5;
      this.items.push({
        id: _id,
        folderName: `New Dummy ${_id}`,
        parentId: 1
      });
    },

    addSubFolder: function (id) {
      let subId = Math.floor(Math.random() * 1000) + 100, obj = {
          id: subId,
          folderName: `Sub Folder ${subId} of Root Folder ${id}`,
          parentId: id,
          noSub: true
        }, child = Array.from(this.items).filter((it) => it.id === id)[0].children;
      child.push(obj)
    }
  }
});
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  
  
<div id="app">
  <v-app id="inspire">
    <v-treeview v-model="tree" :items="items" activatable item-key="folderName" item-text="folderName" open-on-click>
      <template v-slot:prepend="{ item, open }">
        <v-icon>
          {{ open ? 'mdi-folder-open' : 'mdi-folder' }}
        </v-icon>
      </template>
      <template v-slot:append="{ item, open }">
        <v-btn color="error" @click.stop="addSubFolder(item.id)" v-if="!item.noSub">
          Add Sub Folder
        </v-btn>
      </template>
    </v-treeview>
    <v-btn @click="addFolder" color="primary">Add Main Folder</v-btn>
  </v-app>
</div>
👤Stark Buttowski

Leave a comment