CODEWITHSUNDEEP
vue.jsvuetify.js
Kavin404
Kavin404

Reputation: 1029

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

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>

Upvotes: 4

Views: 3337

Answers (2)

Jordi
Jordi

Reputation: 63

I do not think lexa's solution is working for current version of Vuetify. However, I found an easier solution. Just add the following css:

.v-treeview-node__root.v-treeview-node--active {
    pointer-events: none;
}

.v-treeview-node__toggle {
    pointer-events: all;
}

.v-treeview-node__root.v-treeview-node--active will make sure the complete node is unclickable when active. .v-treeview-node__toggle will make sure the toggle button is clickable.

Upvotes: 4

lexa
lexa

Reputation: 424

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/

Upvotes: 10

Related Questions