q-tree is not returning all ticked values

[VasuKuncham]

Hi,
I have an issue with quasar tree component

here is the code snippet which i have created to replicate the issue
https://codepen.io/vasularavel/pen/xxwwRoQ?editors=1010

HTML:

<div id="q-app">
  <div class="q-pa-md row q-col-gutter-sm">
    <q-tree class="col-12 col-sm-6"
      :nodes="simple"
      node-key="label"
      tick-strategy="leaf"
      :ticked.sync="ticked"
      :expanded.sync="expanded"
      :selected.sync="selected"
      default-expand-all
    ></q-tree>
    <div class="col-12 col-sm-6 q-gutter-sm">
      <div class="text-h6">Ticked</div>
      <div>
        <div v-for="tick in ticked" :key="`ticked-${tick}`">
          {{ tick }}
        </div>
      </div>
    </div>
  </div>
</div>

JS:

new Vue({
  el: '#q-app',
  data () {
    return {
      simple: [
        {
          label: 'Satisfied customers',
          children: [
            {
              label: 'Good food',
              children: [
                { label: 'Quality ingredients' },
                { label: 'Good recipe' }
              ]
            },
            {
              label: 'Good service (disabled node)',
              disabled: false,
              children: [
                { label: 'Prompt attention' },
                { label: 'Professional waiter' }
              ]
            },
            {
              label: 'Pleasant surroundings',
              children: [
                { label: 'Happy atmosphere' },
                { label: 'Good table presentation' },
                { label: 'Pleasing decor' }
              ]
            }
          ]
        }
      ],
      selected: "",
      ticked: [ ],
      expanded: []
    }
  }
})

tree component is not giving all selected values

instead it is giving me last node value in the tree

actually i was trying to fetch all the checked values from the tree. In the above example total 11 items are there. But when i select all the items i am getting only 7 items.

is there any possibility to fetch all selected values ?

[tof06]

Hi @VasuKuncham ,

actually i was trying to fetch all the checked values from the tree. In the above example total 11 items are there. But when i select all the items i am getting only 7 items.

This is the expected behavior when QTree's tick strategy is leaf. It returns selected leaves, i.e., nodes that don’t have any child.
If I understand your needs, you want to have also parents nodes in your selected array.

I see in your pen that you found a solution by overriding QTree component. This is a nice solution to your specific problem imho.

[Phillis]

Hi, @VasuKuncham I like your solution in your pen. How can you use the same code in a single file component?