MenuModel 'to' is not working as routerlink - refreshing the whole app

UI Components for Vue
Post Reply
mjwilson94
Posts: 4
Joined: 22 Feb 2021, 12:57

20 Oct 2021, 00:02

I have a Menubar setup and working using the below MenuModel. But there is an issue where the to: '/register' is not acting like a router-link. When clicked it is sending me to the correct route, but it is refreshing the entire application and not just updating the router-view as its supposed to do.

I am using PrimeVue v2 (for Vue 2). This also doesn't work on the MegaMenu either.

Any help would be apprecaited.

Menubar Component

Code: Select all

<template>
<Menubar :model="items">
    <template #start>
        <h1 class="text-2xl">LG</h1>
    </template>
</Menubar>
</template>

<script>
import Menubar from 'primevue/menubar';
export default {
    components: {
        Menubar,
    },
    data() {
        return {
            items: [
                {
                   label:'File',
                   icon:'pi pi-fw pi-file',
                         items:[
                            {
                               label:'Bookmark',
                               icon:'pi pi-fw pi-bookmark',
                               command: () => {
                                    alert('HELLO')
                                }
                            },
                            {
                               label:'Video',
                               icon:'pi pi-fw pi-video',
                               to: '/register'
                            },
                         ]
                },
             ]
        }
    }
}
</script>

mjwilson94
Posts: 4
Joined: 22 Feb 2021, 12:57

20 Oct 2021, 00:26

Having done a bit more digging. It seems in the @click.native part is the issue. removing the .native part fixes the issue.

Code: Select all

 <a :href="href" :class="linkClass(item, {isActive, isExactActive})" @click.native="onItemClick($event, item, navigate)" @keydown.native="onItemKeyDown($event, item)"
                        role="menuitem" v-ripple>
                        <span :class="['p-menuitem-icon', item.icon]"></span>
                        <span class="p-menuitem-text">{{item.label}}</span>
                    </a>

tugce.kucukoglu
Posts: 560
Joined: 23 Oct 2020, 09:28

12 Nov 2021, 15:15

It's a possible bug. We'll check it and you could track it https://github.com/primefaces/primevue/issues/1749

Thanks for your understanding.

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests