我正在使用此代码:
<router-link v-for="item in navigation" :key="item.name" :to="item.to" @click="(item.current = true) " :class="[ item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white', 'group flex items-center px-2 py-2 text-base font-medium rounded-md', ]" >
const navigation = [ { name: "Dashboard", to: "/", icon: HomeIcon, current: false }, { name: "About", to: "/about", icon: UsersIcon, current: false }, { name: "Projects", to: "about", icon: FolderIcon, current: false }, ];`
我的问题是如何使用 routerlink 来实现此功能?我希望当您选择当前项目时将其更改为 true。以便顺风级别发生变化。我尝试了 (item.current = true) 但这将所有当前对象更改为 true。您看到的代码来自 Tailwind 组件侧边栏示例。 https://tailwindui.com/components/application-ui/application-shells/sidebar
我现在使用 active-class 并且它以某种方式工作。但还是想知道大概该怎么做。
P粉9856865572023-09-10 09:59:11
Boussadjra Brahim 的答案是有效的。
只是想添加:所有当前对象 = true 的原因是当您单击其他项目时,您不会将它们更改回 false。因此,如果您不想使用单独的对象来存储当前信息,您可以调用一个函数将所有 [item].currents 变为 false。然后像现在一样继续。