How to stop Vuetiify v-treeview unselecting when clicking on already selected tree item?

Question

I have a vuetify v-treeview in my project with activatable enabled. Let's say that the user has already selected one of the tree-item. At a later point, he/she clicks on the already selected tree-item. The issue is it gets unselected. Is there a way to prevent this?

<template>
  <v-treeview
    shaped
    hoverable
    activatable
    :items="items"
  ></v-treeview>
</template>

<script>
  export default {
    data: () => ({
      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' },
                  ],
                },
              ],
            },
          ],
        },

      ],
    }),
  }
</script>

Answer 1

It is possible to stop item click event from propagation if item is selected (active). To do this, you have to define template for item label and prepend (if you use icons).

Icon and label are placed in some container element, which adds some clickable margins. I solved this by using extra margins.

<v-treeview activatable :items="items">
  <template v-slot:label="{ item, active }">
    <div @click="active ? $event.stopPropagation() : null" style="width:100%;margin:-5px;padding:5px">
      {{ item.name }}
    </div>
  </template>
</v-treeview>

Here is the link to jsfiddle test: https://jsfiddle.net/edbcy07t/