Bagaimana Vue routerlink dan v-for change prop

Question

Saya menggunakan kod ini:

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

Soalan saya ialah bagaimana menggunakan pautan penghala untuk mencapai fungsi ini? Saya mahu ia berubah kepada benar apabila anda memilih item semasa. supaya tahap angin ekor berubah. Saya cuba (item.current = true) tetapi ini menukar semua objek semasa kepada benar. Kod yang anda lihat adalah daripada contoh bar sisi komponen Tailwind. https://tailwindui.com/components/application-ui/application-shells/sidebar

Saya menggunakan kelas aktif sekarang dan ia berfungsi entah bagaimana. Tetapi saya masih mahu tahu apa yang perlu dilakukan.

Answer 1

Jawapan Boussadjra Brahim adalah sah.

Hanya ingin menambah: Sebab semua objek semasa = benar adalah supaya apabila anda mengklik pada item lain, anda tidak menukarnya kembali kepada palsu. Jadi jika anda tidak mahu menggunakan objek berasingan untuk menyimpan maklumat semasa, anda boleh memanggil fungsi yang menukar semua [item].arus kepada palsu. Kemudian teruskan seperti sekarang.