Comment Vue routerlink et v-for changent l'accessoire

Question

J'utilise ce 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 },
  ];`

Ma question est de savoir comment utiliser routerlink pour obtenir cette fonctionnalité ? Je veux que cela devienne vrai lorsque vous sélectionnez l'élément actuel. de sorte que le niveau du vent arrière change. J'ai essayé (item.current = true) mais cela change tous les objets actuels en true. Le code que vous voyez provient de l'exemple de la barre latérale du composant Tailwind. https://tailwindui.com/components/application-ui/application-shells/sidebar

J'utilise la classe active maintenant et cela fonctionne d'une manière ou d'une autre. Mais je veux toujours savoir quoi faire.

Answer 1

La réponse de Boussadjra Brahim est valable.

Je voulais juste ajouter : la raison pour laquelle tous les objets actuels = vrai est que lorsque vous cliquez sur d'autres éléments, vous ne les redéfinissez pas sur faux. Donc, si vous ne souhaitez pas utiliser un objet séparé pour stocker les informations actuelles, vous pouvez appeler une fonction qui transforme tous les [item].currents en faux. Alors continuez comme vous êtes maintenant.