QTree Behavior

[spyke113]

Hello, can I get QTree behavior like Vuetify Treeview when I select “Activatable” and “Open on any item click” at the same time?
https://vuetifyjs.com/en/components/treeview#playground

[chyde90]

So you want to be able to select the leaves of the tree (which is called “activate” in Vuetify) and also toggle the expansion state when a node is clicked?

<q-tree
      :nodes="nodes"
      node-key="key"
      :expanded.sync="expandedNodeKeys"
      :selected.sync="selectedNodeKey"
 />

data() {
   return {
      expandedNodeKeys: [],
      selectedNodeKey: null
   };
},
watch: {
   selectedNodeKey(value) {
      if (value) {
        if (this.expandedNodeKeys.includes(value)) {
          this.expandedNodeKeys = this.expandedNodeKeys.filter(x => x !== value);
        } else {
          this.expandedNodeKeys.push(value);
        }
      }
      // TODO: check if the selected node has children and if so, set this.selectedNodeKey to null
      // that effectively makes only the leaves of the tree selecteable
    }
}