Programatically populated nested levels drawer

[H25E]

Hello everybody,

I’m starting with vue, quasar and frameworks. It’s being an interesting and learning trip, but I’m stuck since some days in a “simple” point.

I want to create a drawer component that supports nested content with q-item and q-expansion-item, and this drawer should be able to be populated programatically from an array like this:

<script>
	var drawerData =
	[
		{
			label:"0",
			icon:"inbox"
		},[
			{
				label:"1",
				icon:"inbox"
			},[
				{
					label:"1.1",
					icon:"inbox"
				},{
					label:"1.2",
					icon:"inbox"
				}
			]
		],[
			{
				label:"2",
				icon:"inbox"
			},[
				{
					label:"2.1",
					icon:"inbox"
				},[
					{
						label:"2.2",
						icon:"inbox"
					},[
						{
							label:"2.2.1",
							icon:"inbox"
						},{
							label:"2.2.2",
							icon:"inbox"
						}
					]
				]
			]
		]
	]

At this point of the travel it’s difficult to me to know how exactly how to proceed. How I could begin? Which paths I can follow? Which to avoid? It’s already done? (I haven’t find it)

Thanks for your time, best regards,

H25E

EDIT: The code should detect if the array element is an object (so, it should render a q-item) or it’s an array (so, it should render a q-expansion-item, with the array elements as inner q-items. Probably calling himself recursively)

[s.molinari]

Not sure it will fulfill all of your requirements, but is what you are looking similar to what we have in the docs in our menu? You could check out the code there (quasar repo /docs folder).

Scott

[metalsadman]

@H25E i suggest reading about recursive component. imo your properties are too few, better if the children are stored in key that makes sense like child.

anyway, here’s an example taking on your data https://codepen.io/metalsadman/pen/eYpWPLM?editors=1010

[H25E]

Thanks for your answers.

@metalsadman Thanks, that’s what I was looking for. I’m reading it carefully to understand it 100%.

@s-molinari Sorry, I haven’t understand your answer. Do you mean in https://github.com/quasarframework/quasar/tree/dev/docs ?

[s.molinari]

Yes. This in particular.

https://github.com/quasarframework/quasar/blob/dev/docs/src/components/AppMenu.js

Scott

[H25E]

I’m currently at this point: https://jsfiddle.net/EMCCi/3p2ov6rg/

I have used an event bus, to avoid to propagate the event also recursively. But I don’t know if that’s the correct way.

Also I’m not being able to use v-model in my component. I have been reading examples ( https://paulund.co.uk/use-v-model-on-custom-vue-component ) but I can’t make it work. Could it be due to the event bus arquitechture?

@s-molinari There is a demo example? It’s difficult for me to interpret all the raw code at once.

[s.molinari]

The docs site is a Quasar app. Just run yarn inside the docs folder and then run quasar dev.

Scott