[Bug] breadcrumb's active state not working #4771
Description
Environment
- Operating System: Windows_NT
- Node Version: v22.18.0
- Nuxt Version: 4.0.3
- CLI Version: 3.28.0
- Nitro Version: 2.12.4
- Package Manager: [email protected]
- Builder: -
- User Config: devtools, components, modules, css, supabase, runtimeConfig, compatibilityDate
- Runtime Modules: @nuxtjs/[email protected], @nuxtjs/[email protected], @formkit/auto-animate/[email protected], @vueuse/[email protected], @nuxt/[email protected], @nuxt/[email protected], motion-v/[email protected]
- Build Modules: -
Is this bug related to Nuxt or Vue?
Nuxt
Version
v4.0.3
Reproduction
- add a breadcrumb
<UBreadcrumb
:items="[
{
label: 'UXHMAC',
to: '/lucky-draw',
active: route.path == '/lucky-draw',
},
{
label: 'Leaderboard',
to: '/lucky-draw/leaderboard',
active: route.path == '/lucky-draw/leaderboard',
},
{
label: 'My Profile',
to: '/lucky-draw/profile',
active: route.path == '/lucky-draw/profile',
},
{
label: 'My Rewards',
to: '/lucky-draw/rewards',
active: route.path == '/lucky-draw/rewards',
},
...(user?.role == 'service_role'
? [
{
label: 'Manage Users',
to: '/lucky-draw/admin/users',
active: route.path == '/lucky-draw/admin/users',
},
{
label: 'Manage Gifts',
to: '/lucky-draw/admin/gifts',
active: route.path == '/lucky-draw/admin/gifts',
},
{
label: 'Manage Rewards',
to: '/lucky-draw/admin/rewards',
active: route.path == '/lucky-draw/admin/rewards',
},
{
label: 'Settings',
to: '/lucky-draw/settings',
active: route.path == '/lucky-draw/settings',
},
]
: []),
]"
/>- navigate to /lucky-draw/leaderboard
- the leaderboard breadcrumb item should be now in active state, but it's not working
Description
The leaderboard should be in active state but it's not, the last item always in active state
Additional context
No response