How to set dynamic function to tree component handler ?

Evandro P.

How to set dynamic function to tree component handler ? For example. There is a function (myFunction) and I want to assign this with all nodes from the specific level of the tree component.

Should I use something like that ? tree1.push({‘title’: ‘option 1’, ‘expanded’: true, handler: myFunction () })

rstoenescu

@Evandro-P yes. this is the way. Tree component uses an array so you can start with a basic one and change it as you go. Please also take notice of the Vue reactivity regarding arrays when changing it: https://vuejs.org/v2/guide/list.html#Array-Change-Detection

dg

Hello, I can you please help me to understand what I am doing wrong here with a tree?

model=tree

this.tree.push({
title: ‘name’,
expanded: false,
children: [],
handle: function(item){
alert(‘trigger handler by click on tree leaf’)
})
Why alert says nothing after click?

s.molinari

Could you please add your whole component and also put your code inside two sets of three backticks (```) so it stays formatted? Thanks.

At first view, it looks like you are missing a curly brace.

this.tree.push({
  title: ‘name’,
  expanded: false,
  children: [],
  handle: function(item){
    alert(‘trigger handler by click on tree leaf’)
  }
})

Scott

dg

Hi Scott, thanks for answer. I missed curly brace just here and I have it in working version.

My idea is to use handle function to load children by using item.id. After I call backend with item_id, I will get all items children

<template>
    <div> 

        <q-tree :model="tree"
                contract-html="<i>remove_circle</i>"
                expand-html="<i>add_circle</i>">
         </q-tree>

     </div>
</template>

export default {
        data() {
            return {
                tree: []
            }
        },
        created() {
            this.tree = this.get_leaves()
        },
        methods: {
            get_leaves(parent_ou_id){
                let leaves: Leaf[] = []
                let args = {
                    parent_ou_id: parent_ou_id ? parent_ou_id : null    // if parent_ou_id == null -> root
                }

                // get list form backend
                entity_list('base_ou', args, ['+name']).then( ou_list => {
                    if(ou_list && ou_list.length > 0){
                        for(let ou of ou_list){
                           leaves.push(this.normilizeLeaf(ou))
                        }
                    }
                }).catch(err => {
                    console.error(err)
                })
                return leaves
            },
            normilizeLeaf(ou){
                return {
                    id: ou.id,
                    title: ou.name,
                    expanded: false,
                    children: ou.kids > 0 ? [''] : [], // need that to render <i></i>
                    handle: function(item){
                        alert('handler')
                        if(item.children.length > 0){
                            item.children = this.get_leaves(item.id) // parent_id to call  a list of children
                        }
                    }
                }
            }
        }
    }

will this code I have got only a root since I call that function in created(), but my handler function does not work

rstoenescu

@dg Hi, it’s handler with an ending ‘r’, instead of handle.

s.molinari

Oh. Duh!

Scott

dg

@rstoenescu
thanks for that, but it still doesn’t work

rstoenescu

@dg I can assure handler() works, but don’t know the exact specifics on your implementation. Unfortunately I’m overloaded with preparing v0.14 release. Can you ping me after that pls? Thank you and sorry I can’t help more at the moment.

dg

@rstoenescu
thanks for your answer, I understand and Good luck with a new release

rstoenescu

Thank you. It will take everything to a new level.

toso

@rstoenescu
I’m new to Quasar Framework but it looks like the handler only will be called for leaf nodes as toggle return before the handler call if the node is expandable:

var QTreeItem = { render: function render() {
…
methods: {
toggle: function toggle() {
if (this.isExpandable) {
this.model.expanded = !this.model.expanded;
return;
}

  if (typeof this.model.handler === 'function') {
    this.model.handler(this.model);
  }
}

},
computed: {
isExpandable: function isExpandable() {
return this.model.children && this.model.children.length;
}
}
};

benoitranque

@dg can you confirm you are getting data from your backend? It seems to me you return leaves before you get a response from your backend