Nested NcListItems

💻 Development app dev
1

Hi!

I am trying to implement nested NcListItems, i.e. something like that:

<template #list>
	<ul>
		<NcListItem v-for="out in outer"
			:key="out.id"
			:title="out.name"
			:bold="false">
			<ul>
				<NcListItem v-for="i in inner"
					:key="i.id"
					:name="i.name" />
			</ul>
		</NcListItem>
	</ul>
</template>

Unfortunately the inner NcListItems aren’t shown. Can anybody help me please?

2

Honestly, I am unsure if this can work in general. How would you expect this to be represented visually? Maybe I am just missing some imagination…

You could have a look in the web developer console if the HTML tags are generated in general by the Vue scripts. If yes, then it is most probably hidden by some CSS magic to make it look “good” in general. Can you maybe sketch/mock what you want to achieve?

3

I expected something similar to NcAppNavigationItem which can have children.

4

OK, with NcAppNavigationItem, the children are handled explicitly. Looking at the NcListItem, you will not see similar lines.

You could file an appropriate PR if you think this is useful. Apart from that, I would redirect you to the frontend team on the Nextcloud instance. I will post there a link to this forum entry, maybe someone has more overview on how things should be handled

5

Hi @olheem !

You need to put ul in a new li element after the NcListItem, you cannot put it inside the NcListItem.

For example:

<template #list>
	<NcListItem v-for="out in outer"
		:key="out.id"
		:title="out.name"
		:bold="false">
	</NcListItem>
	<li>
		<ul>
			<NcListItem v-for="i in inner"
				:key="i.id"
				:name="i.name" />
		</ul>
	</li>
</template>
1 Like
6

Thank you very much for your answer, but this does not help me. The inner for has to be in the outer for.

7

@christianlupus Thank you very much for your answer. I will use NcAppNavigationItem.

1 Like
8

You can use a v-for on a <template> in order to create groups of NcListItem and li/ul pairs. Just a suggestion.