Vuetify treeview - select parent without selecting children - treeview

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.