Vue routerlink 和 v-for 如何更改 prop

Question

我正在使用此程式碼：

   <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 並且它以某種方式工作。但還是想知道大概該怎麼做。

Answer 1

Boussadjra Brahim 的答案是有效的。

只是想添加：所有當前物件 = true 的原因是當您單擊其他項目時，您不會將它們更改回 false。因此，如果您不想使用單獨的物件來儲存當前訊息，您可以呼叫一個函數將所有 [item].currents 變為 false。然後像現在一樣繼續。