How Vue routerlink and v-for change prop-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)

How Vue routerlink and v-for change prop

P粉717595985 2023-09-09 18:41:15

312

I'm using this 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 },
  ];`

My question is how to use routerlink to achieve this function? I want it to change to true when you select the current item. so that the tailwind level changes. I tried (item.current = true) but this changes all current objects to true. The code you see is from the Tailwind component sidebar example. https://tailwindui.com/components/application-ui/application-shells/sidebar

I use active-class now and it works somehow. But I still want to know what to do.

P粉717595985

reply all(1)

P粉9856865572023-09-10 09:59:11 1 floor

Boussadjra Brahim's answer is valid.

Just wanted to add: The reason all current objects = true is that when you click on other items, you don't change them back to false. So if you don't want to use a separate object to store the current information, you can call a function that turns all [item].currents to false. Then continue as you are now.