Wie Vue Routerlink und V-for Change Prop

Question

Ich verwende diesen Code:

   <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 },
  ];`

Meine Frage ist, wie man Routerlink verwendet, um diese Funktionalität zu erreichen? Ich möchte, dass es sich in „true“ ändert, wenn Sie das aktuelle Element auswählen. sodass sich das Rückenwindniveau ändert. Ich habe es versucht (item.current = true), aber dadurch werden alle aktuellen Objekte in true geändert. Der Code, den Sie sehen, stammt aus dem Seitenleistenbeispiel der Tailwind-Komponente. https://tailwindui.com/components/application-ui/application-shells/sidebar

Ich verwende jetzt Active-Class und es funktioniert irgendwie. Aber ich möchte trotzdem wissen, was ich tun soll.

Answer 1

Boussadjra Brahim 的答案是有效的。

只是想添加：所有当前对象 = true 的原因是当您单击其他项目时，您不会将它们更改回 false。因此，如果您不想使用单独的对象来存储当前信息，您可以调用一个函数将所有 [item].currents 变为 false。然后像现在一样继续。