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