No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    QTree Behavior

    Help
    2
    2
    213
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • spyke113
      spyke113 last edited by 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

      1 Reply Last reply Reply Quote 0
      • C
        chyde90 last edited by

        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
            }
        }
        
        1 Reply Last reply Reply Quote 0
        • First post
          Last post