[Solved] Help needed: How to do ticking in q-tree with header slot for nodes

  • I’m trying to get a q-tree that has a custom header slot for the nodes with the ability to tick nodes. I have defined an array for the nodes (:nodes=“myArray”) and :ticked.sync=“tickedKeys”.

    The header slot has

    <template v-slot:default-header="prop">

    With that, I can correctly render fields like {{ prop.node.fieldName }} in the header of each node in the tree. So my q-tree works fine, except for the ticking:

    For the ticking, I added a custom

    <q-checkbox v-model="prop.node.ticked">

    as part of the above header. That displays a checkbox per node in the tree. But when I click one of those checkboxes, nothing happens, except that I observed that a field “ticked”: true (or false) is added to the above array specified for :nodes of the tree. I have not added that field when I load the nodes array initially, because I believed Quasar would do that internally.

    However, tickedKeys (in :ticked.sync) is not updated by these checkboxes, so the ticking through the above custom checkboxes has currently no effect.

    How do I have to define the custom header and checkbox to do the ticking? Can Quasar generate that checkbox for ticking, even for a custom header?

  • I realized meanwhile that, when specifying a tick-strategy as a prop of the q-tree (which I forgot in my first tests), Quasar auto-generates the checkboxes for the ticking, even if there is a custom header slot set up for the q-tree.

    So my assumption above that I need to add a custom checkbox in the custom header was wrong. That custom q-checkbox is not needed, because ticking can be done through checkboxes generated by Quasar (if there is a tick-strategy prop for q-tree). Those Quasar checkboxes for ticking operate on the :ticked.sync array which holds the ids of currently ticked nodes.

    The node.ticked field mentioned above is also not required - it was added due to the v-model of the custom q-checkbox.

Log in to reply