[Vuejs]-How to show only directory using `v-treeview` in vuetify?

0👍

Since you only want to show folders I suggest to filter the fileStructure with a computed property:

computed: {
  filteredItems() {
    const temp = JSON.parse(JSON.stringify(this.fileStructure))
    
    function f(item) {
      if(item.children) {
        item.children = item.children.filter(f)
      }
      return item.type === "directory"
    }

    return temp.filter(f)
  }
}

This created a deep copy of fileStructure so we don’t alter the original array. Then the items are recursively filtered for the type directory.
That way we can get rid of the ifs in the html and only need to check if an item has children.

<v-treeview v-model="tree" :items="filteredItems" activable item-key="path" :open="open" :filter="filter" :search="search" open-on-click>
  <template v-slot:prepend="{ item, open }">
    <v-icon v-if="item.children && item.children.length > 0" color="blue-grey darken-1">
      {{ open ? 'mdi-folder-open' : 'mdi-folder' }}
    </v-icon>
  </template>
  <template slot="label" slot-scope="{ item }">
    <a @click="showSelectedSubFolders(item)">{{ item.name }}</a>
  </template>
</v-treeview>

Leave a comment