Vue路由器与v链接，用于如何更改属性

sdnqo3pr 于 2023-02-24 发布在 Vue.js

关注(0)|答案(2)|浏览(137)

我正在使用此代码：

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

我的问题是我怎样才能使这个工作与路由器链接？我想有当前项目改变为真当你选择它。这样的tailwind类的变化。我尝试（item. current =真），但这改变了所有的当前对象为真。你看到的代码是从tailwind组件侧边栏的例子。https://tailwindui.com/components/application-ui/application-shells/sidebar
我现在用的是活动类，这在某种程度上是可行的。但是我可能还是想知道怎么做。

vue.js

来源：https://stackoverflow.com/questions/75536583/vue-routerlink-with-v-for-how-to-change-prop

2条答案

按热度按时间

ivqmmu1c1#

布萨贾·布拉希姆的答案是可行的。
只是想补充一句：all current objects = true的原因是，当你点击其他项目时，你不会把它们改回false。因此，如果你不想使用一个单独的对象来存储当前信息，你可以调用一个函数，把所有的[item].currents变为false。然后像现在这样继续。

赞(0）回复(0）举报 2023-02-24

igsr9ssn2#

创建一个名为selectedItemName的React式属性，可以通过将单击的项目指定给它来更新该属性：

import {ref} from 'vue'

 const selectedItemName = ref('')

在模板中，将选定项目名称分配给selectedItemName，然后在条件类中使用：

<router-link
                    v-for="item in navigation"
                    :key="item.name"
                    :to="item.to"
                    @click="()=>selectedItemName=item.name"
                    :class="[
                      item.name === currentItem
                        ? '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',
                    ]"
                  >

赞(0）回复(0）举报 2023-02-24

我来回答

Vue路由器与v链接，用于如何更改属性

2条答案

相关问题

热门标签

最新问答