Menu with 2 different menuitems - 1 with to attribute and 2 with command attribute

UI Components for Vue
Post Reply
LorenRochat
Posts: 3
Joined: 19 Aug 2022, 11:10

02 Mar 2023, 09:55

I have a case where i need to click on a user icon and open a menu with two menuitems. One that will redirect to logout page (router-link) and the second menuitem that will open the preferences. This is my menuItem array:

Code: Select all

let userMenuItems = [
  {
    label: translate('preferences'),
    command: () => { editPreferences.value = true },
    icon: 'gear'
  }, {
    separator: true
  }, {
    label: translate('logout'),
    to: { name: 'logout' },
    icon: 'arrow-right-from-bracket'
  }
]
I'm using the templating option and i had to do this workaround:

Code: Select all

<Menu id="user-name" ref="userMenu" :model="userMenuItems" :popup="true">
	<template>
		<router-link v-if="item.hasOwnProperty('to')" :to="item?.to" class="p-menuitem-link">
			<span class="p-menuitem-icon">
				<Icon :icon="item.icon"></Icon>
			</span>
			<span class="p-menuitem-text">{{ item.label }}</span>
		</router-link>
		<a v-else class"p-menuitem-link">
			<span class="p-menuitem-icon">
				<Icon :icon="item.icon"></Icon>
			</span>
			<span class="p-menuitem-text">{{ item.label }}</span>
		</a>
	</template>
</Menu>
Any ideas how to do this cleaner without the v-if/v-else?

Thanks in advance

bahadirsofuoglu
Posts: 84
Joined: 06 Sep 2022, 08:59

09 Mar 2023, 11:11

Hi,
item slot may be the solution. You can access the related menu item with <template #item="slotProps">. I hope it helps.

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests