NcAppNavigationItem href

💻 Development
1

Hi,
I wrote my first simple (just to say, as nothing is simple with Vue) Navigation bar.
I am stuck since hours for a simple href that is converted to “#” once I build it:

<template>
	<NcAppNavigation>
		<NcAppNavigationCaption heading-id="gifgen-heading"
			is-heading
			:title="t('highlightgenerator', 'Simple Gif Generations')" />

		<ul>
			<NcAppNavigationItem
				:title="t('highlightgenerator', 'Images 2 PNG')"
				name="testname"
				href="https://www.nextcloud.com">
				<template #icon>
					<NcAppNavigationIconBullet color="0082c9" />
				</template>
			</NcAppNavigationItem>

			<NcAppNavigationItem
				:title="t('highlightgenerator', 'Video 2 PNG')"
				name="testname2"
				href="page#img2gif">
				<template #icon>
					<NcAppNavigationIconBullet color="0082c9" />
				</template>
			</NcAppNavigationItem>
		</ul>

		<NcAppNavigationCaption heading-id="hlgen-heading"
			is-heading
			:title="t('highlightgenerator', 'Highlight Generator')" />
	</NcAppNavigation>
</template>

<script>
import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption.js'
import NcAppNavigationIconBullet from '@nextcloud/vue/dist/Components/NcAppNavigationIconBullet.js'

export default {
	name: 'MyNavigation',

	components: {
		NcAppNavigation,
		NcAppNavigationItem,
		NcAppNavigationCaption,
		NcAppNavigationIconBullet,
	},
}
</script>

I would like to open the link and create an application with 2-3 tools. Could it be, that href isn’t parsed anymore? There is no effect on my page, I see always “#”:

<li id="app-navigation-item-djvfr" class="app-navigation-entry-wrapper" name="testname" href="https://www.nextcloud.com" data-v-3ab7cf52="">
  <div class="app-navigation-entry">
    <a href="#" aria-expanded="false" class="app-navigation-entry-link"><div class="app-navigation-entry-icon"><div data-v-2f791f07="" class="app-navigation-entry__icon-bullet"><div data-v-2f791f07="" style="background-color: rgb(0, 130, 201);"></div></div></div> <span title="Images 2 PNG" class="app-navigation-entry__title">
				Images 2 PNG
			</span>
   <!---->
    </a> <!----> <!----> <!----> 
  </div> <!---->
</li>
2

I am not aware of any breaking changes. The official documentation does mention href as possible prop.

The # could also be there as the link might be triggered by means of an onclick event handler. Have you checked that?

In any case, you should at least state the NC-Vue library version you are using and ideally provide a github (or similar) link so any volunteers might be able to try themselfs if they see the problem in the code.

Just from the static looking at it it looks reasonable but I am a bit ill and might therefore be not as clear as required for this challenge.

Chris

3

Hallo Chris,
Thank you for the help. I was able to solve it.

With my current NC-Vue library, even a single Item with just href was built with “#” instead of href (I generated a skeleton app last week).

I updated all the vue libraries in the package.json and now I am able to show my navigation bar :smiley:

I will upload my code to Github the next time. Thank you again for the help!

1 Like