vue arborescente des collections + icono plus explicite

<template>

  <v-card flat>

    <v-toolbar :elevation="0" dark class="rounded-0">

      <v-toolbar-title>

        <v-btn text @click="loadHome()">

          <v-icon>

            mdi-home

          </v-icon>

        </v-btn>

      </v-toolbar-title>

    </v-toolbar>

    <v-treeview

        dense

        :load-children="collectionClicked"

        :items="items"

        hoverable

        activatable

        item-text="title"

        class="jama-collection-tree"

        @update:active="updateActive"

        return-object

    >

      <template v-slot:label="{ item }">

        <v-list-item dense class="ma-0 pa-0">

          <template>

            {{item.title}}

          </template>

        </v-list-item>

      </template>

    </v-treeview>

  </v-card>

</template>

<script>

import {mapGetters} from "vuex";

export default {

  name: "CollectionsTree",

  data(){

    return {

      items: [],

      currentCollection : null

    }

  },

  mounted() {

    this.fetchCollections();

  },

  computed: {

    ...mapGetters(["collections","currentRootCollectionId"])

  },

  methods: {

    async collectionClicked(c){

      this.currentCollection = c;

      await this.fetchCollections(this.currentCollection);

      this.$emit('collection-selected', this.currentCollection.id);

    },

    async fetchCollections(collection) {

      let children = [];

      return this.$jamaClient.collections(

          collection ? collection.id : this.currentRootCollectionId,

          false,

          0,

          2000,

          false,

          false).then(cols => {

        if (!this.$store.getters.showHiddenCollections) {

          cols = cols.filter(c => {

            return !c.title.startsWith('.')

          });

        }

        cols.forEach((c) => {

          let col = {

            title: c.title,

            id: c.id,

          }

          if (c.children_count > 0)

            col.children = []

          children.push(col);

        })

        if(!collection)

          this.items =[...children]

        else

          collection.children.push(...children)

      });

    },

    updateActive(values){

      if(values.length !== 1)

        return false;

      this.currentCollection = values[0];

      this.$emit('collection-selected', this.currentCollection.id);

    },

    loadHome(){

      document.querySelectorAll('.v-treeview-node--active')

          .forEach((elt)=>elt.classList.remove('v-treeview-node--active'))//desactive current active

      this.$emit('collection-selected', this.currentRootCollectionId);

    }

  }

}

</script>

<style scoped lang="scss">

.jama-collection-tree {

  .v-list-item {

    cursor: pointer;

  }

}

</style>

 No newline at end of file