q-tree clicking on label to expand doesn't work if select is being used

[sakon54321]

Hi hoping someone can help.

So the functionality I'm trying to achieve is if a node has children it expands by clicking on the node label and if not it selects. Using the arrow to expand does work but this isn't as nice an experience for users.

Currently with the q-tree it looks like a node can't be expandable if it's not selectable. I can fix it with a handler function but this isn't so good in JSON (for me anyway since I'm passing the tree in question from the backend and JSON strips out functions). Any answers for this?

Here's the template code.

          <q-tree
             :nodes="treeNodes"
             node-key="label"
             tick-strategy="leaf"
             :selected.sync="selected"
             :ticked.sync="ticked"
             :expanded.sync="expanded"
          />

And the data section has

      selected: '',
      ticked: [],
      expanded: [],

      treeNodes: [
        {
          label: 'root',
          expandable: true,
          selectable: false,
          children: [
            {
              label: 'Level A',
              expandable: true,
              selectable: false,
              children: [
                {
                  label: 'Level A1',
                  children: []
                },
                {
                  label: 'Level A2',
                  children: []
                },
                {
                  label: 'Level A3',
                  children: []
                }
              ]
            },
            {
              label: 'Level B',
              expandable: true,
              selectable: false,
              children: [
                {
                  label: 'Level B1',
                  children: []
                },
                {
                  label: 'Level B2',
                  children: []
                },
                {
                  label: 'Level B3',
                  children: []
                }
              ]
            }
          ]
        }
      ]

If i replace the template code and remove the select like so:

          <q-tree
            :nodes="treeNodes"
            node-key="label"
            tick-strategy="leaf"
            :ticked.sync="ticked"
            :expanded.sync="expanded"
          />

I get the expand functionality I want but lose the select functionality.

[metalsadman]

don't use/set selectable props, and handle your condition in @update:selected, leveraging QTree's exposed methods.
https://codepen.io/metalsadman/pen/LYxrZGb?editors=1010

[sakon54321]

Nice answer. Thanks for that.

[metalsadman]

Nice answer. Thanks for that.

Np, pls mark the thread as answered, thanks.