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 () })
-
@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
-
@dg Hi, it’s
handler
with an ending ‘r’, instead ofhandle
. -
Oh. Duh!
Scott
-
@rstoenescu
thanks for that, but it still doesn’t work -
@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 understandand Good luck with a new release
-
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