q-tree is not returning all ticked values



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



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


Log in to reply