Vuetify treeview - select parent without selecting children

Question

When using the treeview component from Vuetify, I am attempting to be able to select a parent without having it also select all of the descendants (children). I've tried various combinations of selectable, activatable, etc... but can't seem to find the appropriate combination.

Anyone have any pointers for achieving this desired result?

Answer 1

I had the same problem, just add the selection-type="independent" attribute to your treeview component

UPD: Example on CodePen https://codepen.io/anon/pen/LwOJRE

Documentation https://vuetifyjs.com/en/components/treeview#selection-type

Answer 2

I've put together a jsFiddle to achieve this result: https://jsfiddle.net/g50odsmy/

Vue.use(Vuetify);

var vm = new Vue({
	el: "#app",
  computed: {
    treeParents: function() {
      let tree = [...this.tree];
      // Filter tree with only parents of selections
      tree = tree.filter(elem => {
        for (let i = 0; i < tree.length; i++) {
        	// Skip current element
          if (tree[i].id === elem.id) continue;

					// Check only elements with childrens
          if (tree[i].children) {
            let item = this.findTreeItem([tree[i]], elem.id);
            // If current element is a children of another element, exclude from result
            if (item) {
              return false;
            }
          }
        }
        return true;
      });
      return tree;
    }
  },
  methods: {
    findTreeItem(items, id) {
      if (!items) {
        return;
      }

      for (const item of items) {
        // Test current object
        if (item.id === id) {
          return item;
        }

        // Test children recursively
        const child = this.findTreeItem(item.children, id);
        if (child) {
          return child;
        }
      }
    }
  },
  data: () => ({
    open: ["public"],
    files: {
      html: "mdi-language-html5",
      js: "mdi-nodejs",
      json: "mdi-json",
      md: "mdi-markdown",
      pdf: "mdi-file-pdf",
      png: "mdi-file-image",
      txt: "mdi-file-document-outline",
      xls: "mdi-file-excel"
    },
    tree: [],
    items: [
      {
        id: ".git",
        name: ".git"
      },
      {
        id: "node_modules",
        name: "node_modules"
      },
      {
        id: "public",
        name: "public",
        children: [
          {
            id: "static",
            name: "static",
            children: [
              {
                id: "logo.png",
                name: "logo.png",
                file: "png"
              }
            ]
          },
          {
            id: "favicon.ico",
            name: "favicon.ico",
            file: "png"
          },
          {
            id: "index.html",
            name: "index.html",
            file: "html"
          }
        ]
      },
      {
        id: ".gitignore",
        name: ".gitignore",
        file: "txt"
      },
      {
        id: "babel.config.js",
        name: "babel.config.js",
        file: "js"
      },
      {
        id: "package.json",
        name: "package.json",
        file: "json"
      },
      {
        id: "README.md",
        name: "README.md",
        file: "md"
      },
      {
        id: "vue.config.js",
        name: "vue.config.js",
        file: "js"
      },
      {
        id: "yarn.lock",
        name: "yarn.lock",
        file: "txt"
      }
    ]
  }),
});

<link href="https://unpkg.com/vuetify@1.5.6/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.6/vuetify.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<div id="app">
  <v-app>
    <v-layout row wrap>
      <v-flex>
        <v-treeview
          v-model="tree"
          :items="items"
          activatable
          active-class="grey lighten-4 indigo--text"
          selected-color="indigo"
          open-on-click
          selectable
          transition
          return-object
          hoverable
        ></v-treeview>
      </v-flex>
    </v-layout>
    <v-layout row wrap>
      <v-flex xs6 style="border: 2px solid red"><v-chip>Current mode:</v-chip> {{tree}}</v-flex>
      <v-flex xs6 style="border: 2px solid green"><v-chip>Only parents:</v-chip> {{treeParents}}</v-flex>
      <v-flex xs6 style="border: 2px solid red"># selected: {{tree.length}}</v-flex>
      <v-flex xs6 style="border: 2px solid green"># selected: {{ treeParents.length}}</v-flex>
    </v-layout>
  </v-app>
</div>

In treeParents variable I filter out all the children if a parent is selected. This solution forces you to save also the original tree to reload the same data later, but I've opened a Feature Request on Vuetify GitHub project page https://github.com/vuetifyjs/vuetify/issues/6759 and hope to have time to explore the component better to see if I can make a pull request.