So I am using Laravel with Vue3 and Inertiajs. I have included Ziggy to be able to use named routes. This works. But I am trying to add active
to my link classes whenever the current route is active, like so:
<Link :href="route('user.dashboard')"
class="nav-link"
:class="{'active': route().current() == route('user.dashboard')}">
Dashboard
</Link>
This doesn't work. What does work, however, is both of the following:
:class="{'active': route().current('user.dashboard')}"
:class="route().current('user.dashboard') ? 'active' : ''"
But when clicking on another link, the active
class is not being removed, thus resulting in my "Dashboard" link staying active indefinitely. What am I doing wrong here?
can you try this <Link :href="route('user.dashboard')" class="nav-link" :class="{ 'active': $page.props.ziggy.location == route('user.dashboard') }">Dashboard</Link>