QTree selection and ticking id to create dynamic components



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



  • You can have both a nodeKey and a label. The example you linked to is only using the label as the node-key. You can add a nodeKey property to your data and use that as the node-key.

    https://codepen.io/smolinari/pen/GaLgYm

    Scott



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



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



  • But, if you have the key/ id, you can “query” for and return any data you need out of the tree.

    https://codepen.io/smolinari/pen/GaLgYm

    Scott



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



  • You guys could have saved me a lot of time earlier today! Really glad to have found this thread, and the most helpful example by s.molinari with CodePen implementation (which includes the settings for Quasar). Thanks a bunch - I feel like you’ve more than made up my wasted time today.


Log in to reply