Vue Router 链接使用 Vue Bootstrap 表中的另一个列数据路径答案

【问题标题】：Vue Router link using another column data path in Vue Bootstrap tableVue Router 链接使用 Vue Bootstrap 表中的另一个列数据路径
【发布时间】：2019-12-19 21:29:18
【问题描述】：

我在 vue bootstrap 中有用户数据表。我也在使用 Vue Router 进入用户个人资料页面。个人资料页面路径是/user/idNumber，我想在名称下路由它。像这样的：

<a href="/users/idNumber"> Name </a>

我该怎么做？

代码：

<b-table striped hover :items="usersList" :fields="fields">
    <template v-slot:cell(_id)="data">
        <router-link :to="`/user/${data.value}`">{{ data.value }}</router-link>
    </template>
    <template v-slot:cell(fullname)="data">
        <router-link :to="`/user/${data.value}`">{{ data.value }}</router-link>
    </template>
</b-table>

用户列表：

[{"_id":"5df9663acf06e2001742ac17","name":"Retdadada5155465","lastname":"Nienow","email":"Laverne55@yahoo.com","age":"1995","gender":"female","weight":58,"height":166,"activity":1.4,"value":3,"_createdOn":"2019-12-17T23:35:22.339Z","_updatedOn":"2019-12-19T20:57:30.588Z"},{"_id":"5df842f2cf06e2001742a8ec","name":"Retdadada516","lastname":"Nienow","email":"Laverne55@yahoo.com","age":"1993","gender":"female","weight":58,"height":166,"activity":1.4,"value":3,"_createdOn":"2019-12-17T02:52:34.183Z","_updatedOn":"2019-12-19T20:57:42.352Z"},{"_id":"5df7c972bca42200177decb4","name":"Lue","lastname":"Schneider","email":"Rosella93@yahoo.com","age":"1997","gender":"female","weight":60,"height":180,"activity":1.6,"_createdOn":"2019-12-16T18:14:10.554Z","_updatedOn":"2019-12-19T20:57:51.550Z"}]'

字段：

["_id",
                {
                    key: "fullname",
                    label: "Fullname",
                    sortable: true,
                    formatter: (value, key, item) => {
                        return item.name + " " + item.lastname
                    },
                },
                {
                    key: "birthYear",
                    label: "Age: ",
                    sortable: true,
                    formatter: (value, key, item) => {
                        return new Date().getFullYear() - item.age
                    },
                },
            ],

问候

【问题讨论】：

你的userList 和fields 长什么样子？
我只是添加了这一行。
所以你应该可以点击名字，然后它应该重定向你，对吧？
是的。重定向到“users/userID”而不是 /name。

标签： javascript vue.js vue-router

【解决方案1】：

对带有全名的第二个模板稍作更改即可完成工作。第一个应该没问题，我已经看到了。

您只需使用 data.item 代替，即可利用循环项目中的任何数据

<template>
  <b-table striped hover :items="usersList" :fields="fields">
    <template v-slot:cell(_id)="data">
      <router-link :to="`/user/${data.value}`">{{ data.value }}</router-link>
    </template>
    <template v-slot:cell(fullname)="data">
      <router-link :to="`/user/${data.item._id}`">{{ data.value }}</router-link>
    </template>
  </b-table>
</template>

工作沙盒：https://codesandbox.io/s/bootstrap-vue-sandbox-wvv9j

【讨论】：

谢谢！现在没关系，我之前只尝试过 ":to="/user/${item._id}"... 很丢脸。

【解决方案2】：

如果您查看此处的文档：https://bootstrap-vue.js.org/docs/components/table/#scoped-field-slots，您会看到在使用作用域字段槽时，data 对象具有多个属性。其中之一是item，它代表该行的整个项目。所以你可以这样做：

<router-link :to="`/user/${data.item.someProperty}`">
    {{data.value}}
</router-link>

其中someProperty 是您要放入路由路径中的用户对象的属性。

【讨论】：