How to set dynamic function to tree component handler ?



  • 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 () })


  • Admin

    @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



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



  • 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



  • 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


  • Admin

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



  • Oh. Duh! :smile:

    Scott



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


  • Admin

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



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


  • Admin

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



  • @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;
    }
    }
    };



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


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.