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

UI Components for Vue
Post Reply
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">
		<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 class="p-menuitem-text">{{ item.label }}</span>
		<a v-else class"p-menuitem-link">
			<span class="p-menuitem-icon">
				<Icon :icon="item.icon"></Icon>
			<span class="p-menuitem-text">{{ item.label }}</span>
Any ideas how to do this cleaner without the v-if/v-else?

Thanks in advance

Posts: 66
Joined: 06 Sep 2022, 08:59

09 Mar 2023, 11:11

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