QTree Behavior



  • 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



  • 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
        }
    }
    

Log in to reply