@rstoenescu thank you for your reply. My bad. I didnt understand it well. Just thought the delay property would create a sort of timeout effect even when the hide method is called. Now I understand how it works. Regards.

@rstoenescu thank you for your reply. My bad. I didnt understand it well. Just thought the delay property would create a sort of timeout effect even when the hide method is called. Now I understand how it works. Regards.

Hi. Just wondering if I am doing something wrong,or if I am missing something that is not in the documentation. The delay property for the loading show method is not working at all.

methods:{
    gotoHome(){
        this.$q.loading.show({ delay: 1000 })
        this.$q.loading.hide()
        this.$router.push({name:'Index'})
    }
}

It is supposed to delay/show the loading animation for 1000ms. What am I missing? Can’t find anything about this in the documentation or in the forum.

@s-molinari thank you again for our time. Thought of that, about query the object with the key and return the desired data. It is just that I thought I was missing something from the QTree component, but now that I see your code and tested myself, works great. This really gives QTree a huge potencial.

Regards,
Jaime

To be able to use the label as component name I had to create a filter that will delete the white spaced, and then call the dynamic component like this:

<h2>{{ tick }}</h2>
<component :is=“tick | removeWhiteSpace” ></component>

What I was looking for is to use an object with the ticked data like this:

<h2>{{ tick.label }}</h2>
<component :is=“tick.component” ></component>

@s-molinari Hi. Thank you for your response. I have been studying the tree component, and I noticed that the ticked data is a simple array, that will then will sync with the node-key to show the ticked options. After that, you will need to do a v-for for the ticked array, and I will only be able to access the simple value in the array. I was wondering, if there is a way for the ticked array to be an object, so I can access the label and my custom key (that I am using as a component name for dynamic use) inside the v-for. It will help me to use the label as a title and key as dynamic component name. I am not sure if I am clear enough. I was able to do exactly the codepen example, but instead of key I named it id. So basically, just wondering if ticked can be an object { id: “componentName”, label: “Component Name”} and I can use both values inside the v-for loop.

I am using the QTree component with the selection and ticking option as in this example:

https://quasar.dev/vue-components/tree#Selection-vs-ticking%2C-expansion

I see that it uses the label as id. How can I assign a custom ID to each node(label) so I can use <component :is=“dynamicComponent” /> and generate dynamic components based on the options I ticked? The label has spaces, and of course it will give me errores if I use the label as the :is prop to generate the dynamic components. Any ideas on this?

Hi, Quasar users. I have been reading a lot to get the perfect stack that will fit my needs, and since I discovered Quasar I fell in love. There is a lot to learn, yet the way the documentation is built is perfect. Vue + Quasar rocks.